info@kodmek.com
Kodmek
  • Anasayfa
  • Blog
  • Araçlar
Kodmek
  • Anasayfa
  • Blog
  • Araçlar
  • Anasayfa
  • Blog
  • Araçlar
  • Anasayfa
  • Blog
  • Araçlar
Blog
Home Web HTML Responsive Slider Yapımı
Web

HTML Responsive Slider Yapımı

MeK 7 Nisan 2020 0 Comments

Bu yazımızda web projelerinizde responsive slider eklemeniz için gerekli kodları paylaşacağız.

Slider, web tasarım terminolojisinde kullanılan bir terim olup, web sayfasına eklenen slayt ve sunular olarak kullanılır. Slider’ın kullanım amacı her internet sitesine göre farklılık gösterebilir ancak genellikle öne çıkan içerikler, en önemli içerikleri yada en son eklenen güncel içeriklerin gösterildiği görsel bölümler olarak kullanılırlar. Yapısına göre Slider’daki slayt şovlar otomatik olabileceği gibi kullanıcının geçiş yaparak kullanabileceği slayt şovlar da olabilir.

Slider önceden tanımlanmış zaman aralığında slaytları kaydırarak, kullanıcı girişi olmadan otomatik olarak slayt gösterileri çalıştırabilir. Slider, sonraki veya önceki slaytları görüntülemek için tıklama veya hızlıca kaydırma gibi kullanıcı etkileşimlerine de yanıt verebilir. Ayrıca, slider,
kullanıcıların sliderlardaki belirli bir slaydı görüntülemek için tıklayabilecekleri düğmeleri veya küçük resimleri de olabilir.

HTML Responsive Slider Kodları:

Sliderı HTML sayfamıza eklemek için etiketleri arasına js ve css dosyalarını yükleyin.

<script type="text/javascript" src="jquery-1.9.1.js"></script>

<script src="jquery.bxslider.js"></script>

<link href="jquery.bxslider.css" rel="stylesheet" />	

Web sayfamıza aşağıdaki gibi kodları ekleyelim

<div class="bxslider">
  <div><img src="images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="images/coffee3.jpg" title="Happy trees"></div>
</div>

Javascript ayar kodlarımız

$(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true,
      stopAutoOnClick: true,
      slideWidth:300,

      minSlides:5,

      maxSlides:5,

      slideMargin: 10

      }); 
});

Yukardaki kodlar ile slider oluşturabilir ve web sayfanıza kolaylıkla entegre edebilirsiniz.

Kodların tümüni indirmek için aşağıdaki bağlantıyı kullanabilirsiniz. Aşağıdaki bağlantı slider dökümanının bütün halidir.

Icon

HTML Responsive Slider indir

1 file(s) 760.43kb
Download
html slider slider slider yapımı
103
1280 Views
AboutEnes KALE
Php ile 1 gün Öncesi veya Sonrasının tarihini almaPrevPhp ile 1 gün Öncesi veya Sonrasının tarihini alma3 Nisan 2020
En iyi wordpress temaları 202013 Nisan 2020En iyi wordpress temaları 2020Next

Bir yanıt yazın Yanıtı iptal et

Yorum yapabilmek için oturum açmalısınız.

New Comments
  • SP Flash Tool için veysel25
  • DZ09 Smartwatch Saat modelleri ekleme için MeK
  • DZ09 Smartwatch Saat modelleri ekleme için furkan öztoprak
  • STM32F103 1602A LCD Bağlantısı için MeK

Kodmek güncel teknoloji ve programlama platformu
Bültene kayıt ol

[mc4wp_form id="357"]

Kullanım koşulları | Gizlilik Çevreve politikası

Copyright © 2023 kodmek.com. All Rights Reserved.