Excolo Slider - Basit, Duyarlı, Dokunmatik ve Fare Etkin Jquery Slider

Excolo Slider - Basit, Duyarlı, Dokunmatik ve Fare Etkin Jquery Slider

Siteniz için duyarlı tasarımı ve dokunmayı destekleyen basit bir jQuery slider eklentisi. Bu yazıda fonksiyonel ve ücretsiz bir jQuery slider'ın en güzel örneklerinden birinin inceledik ve kaynak kodları sunduk. Bu sayede siteniz için çok güzel bir içerik veya resim kaydırıcı yapabilirsiniz. Kaydırıcılar jQuery'nin en popüler kullanım örnekleri arasındadır.

Duyarlı tasarım, klavye ve dokunmatik navigasyonu destekleyen basit bir jQuery slider eklentisi.

Özellikler:

  • Otomatik Slayt gösterisi
  • Fare kaydırmalı gezinme
  • Önceki / sonraki düğmesi ile gezinme
  • HTML5 veri özellikli altyazıları
  • Sayfalara numara koyma
  • Son slayda ulaşıldığında tekrarla
  • Slayt gösterisini geriye doğru oynat
  • Duyarlı tasarımlar için başlangıçta ve tarayıcı boyutlarında otomatik ayarlama
  • Dokunma etkin (birkaç tarayıcıyla sınırlı)
  • CSS kullanarak stil değiştirilebilir
  • Bu özelliklerin çoğu, kaydırıcıyı ayarlarken yapılandırılabilir ve kapatılabilir.

Kurulum
Öncelikle eklentiyi aşağıdaki indirme kutusundan ederek veya Github'da Excolo-Slider'ı ziyaret ederek indirebilirsiniz.

Dosyayı indirdikten sonra istediğiniz bir klasöre aşağıdaki dosyaları kopyalayın. İşte eklemeniz gereken dosyalar:

query-1.9.1.min.js

jquery.excoloSlider.min.js

jquery.excoloSlider.css

Bunlar istediğiniz klasöre eklenebilir.

Bu dosyaları sitenizde kullanmak için aşağıdaki kodları sitenize ekleyin:

<script src="javascripts/jquery-1.9.1.min.js"></script>

<script src="javascripts/jquery.excoloSlider.min.js"></script>

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

Burada dosyaları javascripts ve stylesheets klasörüne yerleştirdim, ancak dosyaları kendi web sitenizdeki yerleşime bağlı olarak seçtiğiniz klasörü kullanarak yolu değiştirebilirsiniz.

Slaytların HTML kodu, aşağıdaki gididir. Bu kodu içeriğin nerede görünmesini istiyorsanız oraya ekleyin:

<div id="slider">

    <img src="images/image1.jpg">

    <img src="images/image2.jpg">

    <img src="images/image3.jpg">

    <img src="images/image4.jpg" data-plugin-slide-caption="I am a caption <b>and I can contain HTML.</b>">

    <img src="images/image5.jpg">

    <img src="images/image6.jpg">

    <img src="images/image7.jpg">

    <img src="images/image8.jpg">

</div>

Her slayt için bir başlık metni oluşturmak için HTML5 data-attribute data-plugin-slide-caption nasıl kullanabileceğinize dikkat edin. Bu başlıklar HTML'ye izin verir ve css kullanılarak tamamen şekillendirilebilir.

Daha sonra varsayılan ayarlarla slider eklentisini başlatmak için komut dosyasını ekleyin:

$(function () {

    $("#slider").excoloSlider();

});

Bir sonraki bölümde, kaydırıcıyı ihtiyaçlarınıza göre nasıl yapılandıracağınızı görebilirsiniz.

Yapılandırma:
Kaydırıcıyı yapılandırırken birkaç seçeneğiniz vardır. 
Bir seçenek, kaydırıcıyı başlatırken ayarları bir parametre olarak sağlamaktır:

$(function () {

    $("#slider").excoloSlider({

        mouseNav: false,

        interval: 5000, // = 5 seconds

        playReverse: true

    });

});

Başka bir seçenek, slaytta veri niteliğini kullanarak ayarların sağlanmasıdır:

$(function () {

    $("#slider").excoloSlider();

});

 

<div id="slider" data-plugin-options="{ "mouseNav":false,

                                        "interval":"5000",

                                        "playReverse":true}">

    <img src="images/image1.jpg">

    <img src="images/image2.jpg">

    <img src="images/image3.jpg">

    ...

</div>

Dosyayı İndir (1,48 MB)
Daha önce 19 kez indirildi.

Ogznet.com

Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
Yorum Yaz


yenile