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.