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>


Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 112 kez okundu.

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

Yorum Yaz

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
" Excolo Slider - Basit, Duyarlı, Dokunmatik ve Fare Etkin Jquery Slider konulu makalemizde Ogznet.com olarak sizlere Excolo Slider - Basit, Duyarlı, Dokunmatik ve Fare Etkin Jquery Slider ile ilgili bilgiler aktarmak istedik. Hemen yukarıda Excolo Slider - Basit, Duyarlı, Dokunmatik ve Fare Etkin Jquery Slider ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "
Reklam Ver instagram takipçi satın al