Son zamanlarda internet sitelerinin ana sayfalarında slider olarak slick kullanmayı tercih ediyorum, owl carousel'den daha pratik ve kullanışlı gibi geliyor. Az önce birkaç görsellik slider'ımın sayfa açılışında otomatik olarak dönmeye başlamadığını fark edince nerede hata yapıyorum diye baktım, neyse ki problemi gidermek fazla uzun sürmedi. Eğer benzer bir hata ile karşılaşısanız aşağıdaki özellikleri yazdığınızdan emin olun. autoplay özelliği true olsun, slide değişme hızı olan autoplaySpeed özelliği de 3000 gibi makul geldi bana.
$j('.anasayfa-slider > ul').slick({
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
dots: false,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
dots: true
}
}]
});
Hangi özelliğin ne işe yaradığını da kısaca yazayım. Aşağıdaki özellikler benim için yeterli oldu, ama daha detaylı ayarlamalar yapabilmenizi sağlayan özellikleri de var.
infinite: Son slide geçtikten sonra ilk slide'a dönmesini, yani sonsuz kez dönmesini sağlar.
dots: Slide sayısını ifade eden noktaların olmasını ya da olmamasını ayarlamanızı sağlar
arrows: Slide'ların sağ ve sol taraflarında ok olup olmamasını ayarladığınız yerdir
autoplay: İlk yüklemeden itibaren otomatik olarak değişmesini sağlar
autoplaySpeed: Slide değişim hızı
slidesToShow: Aynı anda ekranda kaç slide görüntüleneceğini ayarlamanızı sağlar. Anasayfa slider'ı tek görseldir.
slidesToScroll: Değişim esnasında görsellerin kaçar kaçar değişeceğini ayarlamanızı sağlar. Örneğin 5 görseli gösterdiğiniz bir karoseliniz varsa teket teker kaymasını da sağlayabilirsiniz, beşer beşer değişmesini de sağlayabilirsiniz.
responsive: Farklı ekran boyutlarında ayarları değiştirmeye yarar