Thumbnail Slick Slider ve Ajax Loader
Thumbnail Slick Slider ve Ajax Loader
Thumbnail Slick Slider ön yüklemeden sonra ajax ile nasıl yüklenir? Ön yükleme yapıldıktan sonra herhangi bir alana yüklenen elemanlar slick crousel tarafından tetiklenmeyebilir. Bunun bir çok nedeni olması ile beraber en çok öne çıkan neden Slick Carousel ilk yüklemede olan elemanları tanır ve onlara işlem yapar. sonradan gelen elemanlar için tekrar hesaplama yapması gerekir. Bu nedenle biz yükleme yaptıktan sonra Slick Slider çalıştıracağız.
1. Adım - Planlama
Burada slider olarak kullanacağımız alanları belirleyeceğiz.
<div class=”container”>
<div class=”col-6 offset-3″>
<div class=”slickSliderBig”>
</div>
</div>
<div class=”col-6 offset-3″>
<div class=”slickSliderThumb”>
</div>
</div>
</div>
2. Adım - Ajax Yükleme
Ajax ile ilgili dosyamıza bağlanarak gelen yanıta göre yükleme yapıyoruz. Success durumunda gelen yanıtları ilgili alanlara Append fonksiyonu ile yüklüyoruz.
3. Adım - Slick Slider Uyandırma
Ajax ile yükleme yapılan alanlardaki slick slider işlemini çalıştırmak için slick slider özelliklerini tanımladığımız fonksiyonları çağırıyoruz.
$(document).ready(function(){
$.ajax({
type: “post”,
url: “getir.php”,
success : function(cevap){
$(‘.slickSliderBig’).append(cevap);
$(‘.slickSliderThumb’).append(cevap);
$(‘.slickSliderBig’).slick(ssOptionsBig());
$(‘.slickSliderThumb’).slick(ssOptionsThumb());
}
});
});
4. Adım - Slick Slider Özelliklerini Fonksiyonlara tanımlama
function ssOptionBig(){
return {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: false,
infinite: true,
cssEase: ‘cubic-bezier(0.7, 0, 0.3, 1)’,
autoplay: false,
autoplaySpeed: 3000,
asNavFor: ‘.slickSliderThumb’,
prevArrow:”Geri”,
nextArrow:”İleri”,
}
}
function ssOptionsThumb(){
return {
centerMode: true,
infinite: true,
asNavFor: ‘.slickSliderBig’,
centerPadding: ’60px’,
slidesToShow: 3,
speed: 500,
arrows: true,
focusOnSelect: true,
prevArrow:”Geri”,
nextArrow:”İleri”,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: ’40px’,
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: ’40px’,
slidesToShow: 1
}
}]
}
}
Takıldığınız ya da anlamadığınız bişeyler olursa aramaktan çekinmeyin. Her zaman destek olabiliriz.
+ There are no comments
Add yours