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: 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:
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(); });
