Web Tasarımı ve Sunucu Yönetimi

HTML Responsive Slider Yapımı

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.

Etiketler
Daha Fazla Göster

MeK

Pamukkale Üniversitesi Elektrik Elektronik Mühendisliği ni 2018 yılında bitirdim. 2018 yılında Yüksek Lisansa Karatekin Üniversitesi Elektrik Elektronik Mühendisliğine başladım. Programlamayı seviyorum Delphi, C# , C , PHP dillerine hakimim ARM ile uğraşıyorum bunların yanında web tasarım ve sunucu yönetimi ile hobi olarak uğraşıyorum. Sizlere Kodmek sayfamda hakim olduğum diller ve öğrenmek istediğim konularda yardımcı olmaya çalışacağım

Bir cevap yazın

Başa dön tuşu
Kapalı
Kapalı