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.
