Begin typing your search above and press return to search. Press Esc to cancel.


Read more

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

        }

    }]

}

}


Demoyu İncele Demoyu İndir

 

Takıldığınız ya da anlamadığınız bişeyler olursa aramaktan çekinmeyin. Her zaman destek olabiliriz.