Question

这是一个与here类似的问题。在成功的ajax调用之后，我正试图使我的光滑旋转木马工作。试过那里的每一个解决方案，但它似乎仍然不适合我。

.reviews-page-carousel slick

$('.reviews-page-carousel').slick({
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
});

ajax call

$.ajax({
    type: "GET",
    url: review_url + "?page=" + page,
    success: function(result) {
        $('.reviews-page-carousel').slick('unslick').slick('reinit');
    }
})

也试过这个

$.ajax({
    type: "GET",
    url: review_url + "?page=" + page,
    success: function(result) {
        $('.reviews-page-carousel').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
        $('.reviews-page-carousel').slick(getSliderSettings()); /* Initialize the slick again */
    }
});

两者都给出了这个错误：

未捕获的TypeError：无法读取属性＆＃39; unslick＆＃39;未定义的

Answer 1

调用请求后，设置超时以初始化滑动滑块。

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
}

$.ajax({
    type: "GET",
    url: review_url+"?page="+page,
    success: function(result){
        setTimeout(function () {
            $(".reviews-page-carousel").slick(options)
        }, 500);
    }
})

更新：不要在开始时初始化光滑滑块。只需在ajax超时后初始化。这应该适合你。

Answer 2

解决方案

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
}

的Ajax

$.ajax({
        type: "GET",
        url: review_url+"?page="+page,
        success: function(result){

            setTimeout(function () {
                $(".reviews-page-carousel").not('.slick-initialized').slick(options)
            }, 500);

Answer 3

在分配新数据之前，您需要销毁光滑部分：

function destroyCarousel() {
    if ($('.reviews-page-carousel').hasClass('slick-initialized')) {
        $('.reviews-page-carousel').slick('unslick');
    }
}


    function applySlider() {
         $('.reviews-page-carousel').slick({
                 arrows: false,
                 slidesToShow: 1,
                  variableWidth: true,
                  centerPadding: '10px'
         });
  }

分配新数据后，再次调用滑动功能。

    $.ajax({
        type: "GET",
        url: review_url + "?page=" + page,
        success: function(result) {
            destroyCarousel(); // destroy slick slider first
             $('.reviews-page-carousel').html(''); // now make html empty          
             $('.reviews-page-carousel').html(result); // apply new data
              applySlider(); // apply slick slider again
    }
})

请尝试上述解决方案，如果需要任何帮助，请告诉我。

谢谢

ajax调用后，Slick无法正常工作

3 个答案: