HTML Slider Ekleme

Skitter, birden fazla animasyon ve seçenekle sitelere güç kazandıran güzel bir slider örneğidir.

Bu yazıda HTML slider kullanımı ve birkaç önemli özelliğinin kullanımına değinilecektir. Diğer özellikleri içinde kaynak kütüphanenin kullanımına değinilecektir.

Yazılım Bilişim üzerinde hazırlanan diğer slider örnekleri için sitene slider ekle yazısını inceleyebilirsiniz.

ÖRNEĞİ İNDİR

Adım 1: Skitter kütüphanesinin indirilmesi. Npm, bower yada aşağıdaki bağlantı ile github üzerinden indirebilirsiniz.

https://github.com/thiagosf/skitter/archive/master.zip

Adım 2:  Kurulum tamamlandıktan sonra kütüphaneyi sayfaya dahil ediyoruz.

jQuery, skitter, animasyon script dosyaları ile birlikte skitter slider için gerekli olan css dosyasını projeye dahil ediyoruz.

        <link href="eklenti/skitter-slideshow/dist/skitter.css" rel="stylesheet">
        
        <script src="eklenti/jquery/dist/jquery.js"></script>
        <script src="eklenti/skitter-slideshow/dist/jquery.skitter.min.js"></script>
        <script src="eklenti/jquery.easing/js/jquery.easing.js"></script>

Adım 3: Kurulum tamamlandıktan sonra artık HTML dosyasını hazırlayabiliriz.

Aşağıdaki gibi div etiketine skitter , ana-slide classını kullanıyoruz.

Her slide ögesi için birer tane li etiketi oluşturulur. li içindeki her a etiketi resimi, div etiketi de resim üzerindeki açıklamayı ifade eder. Ayrıca bootstrap ile birlikte rahatlıkla kullanılabilir.

• li
  a
  div.label_text
• li
  a
  div.label_text

<div class="skitter ana-slide with-dots">
    <ul>
       <!-- her bir slide için  yeni bir tane li etiketi  oluşturulur. -->
       <li>
        <a href="#resim1">
           <img src="">
        </a>
        <div>
            <p>
                Resim ile ilgili yazı
            </p>
        </div>
       </li>
    </ul>
</div>

Örn:

<div class="skitter ana-slide with-dots">
    <ul>
       <!-- her bir slide için  yeni bir tane li etiketi  oluşturulur. -->
       <li>
        <a href="#resim2">
           <img src="https://visualhunt.com/photos/l/1/aurora-borealis-over-mountains-at-night.jpg" class="cut"><!-- cut animasyonu yapılacak --->
        </a>
      <!--  <div>
            <p>
                Yıldızlar hiç bu kadar ilgniç olmadı
                <a href="#see-more" class="btn btn-xs btn-warning">See more</a>
            </p>
        </div> -->
       </li>
       <li>
        <a href="#resim3">
           <img src="https://visualhunt.com/photos/l/1/tourists-on-top-of-rock.jpg">
        </a>
        <div class="label_text">
            <p>
                Güneşli bir günde güzel bir manzara
                <a href="https://www.yazilimbilisim.net">Yazıyı oku</a>
            </p>
        </div>
       </li>
    </ul>
</div>

Adım 4: Skitter’i çalıştırıyoruz. ana-slide classının skitter nesnesi olduğunu belirtiyoruz.

$(function() {
  $('.ana-slide').skitter();
});

Ek Seçenekler

https://skitter-slider.net/options.html adresinden skitter’i özelleştirebiliyoruz.

Kontroller

  $('.ana-slide').skitter({
     controls:true
  });

Navigasyon

  $('.ana-slide').skitter({
     controls:true,
      navigation:true
  });

Numara butonları kullanma

 $('.ana-slide').skitter({
      dots: false,
      numbers: true
  });

Focus ile ekranda odaklama

  $('.ana-slide').skitter({
      focus: true
  });

Thumb sembolleri olarak gösterme

    
  $('.ana-slide').skitter({
       thumbs: true
  });

Özel Tema Seçenekleri

skitter-clean

skitter-round

<div class="skitter skitter-themed skitter-clean  with-dots ana-slide">
....
</div>