ajax调用后Slick不工作答案

【问题标题】：Slick not working after ajax callajax调用后Slick不工作
【发布时间】：2017-12-19 05:06:46
【问题描述】：

这是一个与here 类似的问题。在成功调用 ajax 后，我正试图让我的光滑轮播工作。在那里尝试了所有解决方案，但它似乎仍然不适合我。

.reviews-page-carousel 光滑

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

ajax 调用

$.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 */
    }
});

两者都给出这个错误：

未捕获的类型错误：无法读取未定义的属性“unslick”

【问题讨论】：

尝试使用 $('.reviews-page-carousel').unslick();而不是 $('.reviews-page-carousel').slick('unslick');
@DeepakKumarTP 错误：未捕获的类型错误：$(...).unslick 不是函数
$('.reviews-page-carousel').slick('unslick');删除这一行检查stackoverflow.com/questions/36852761/…
也试过了，得到了这个错误：Uncaught TypeError: Cannot read property 'add' of null。似乎是因为我试图加载两次光滑？你知道如何解决这个问题吗？

标签： javascript ajax slick.js

【解决方案1】：

您需要在分配新数据之前销毁 slick 部分：

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'
         });
  }

分配新数据后，再次调用 slick 函数。

    $.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
    }
})

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

谢谢

【讨论】：

效果很好。我打算改变这个问题的滑块插件cos。你拯救了我的一天。用 .slick('unslick') 销毁 slick 并再次应用是关键。

【解决方案2】：

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

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 之后初始化。这应该对你有用。

【讨论】：

试过这个并得到这个错误：Uncaught TypeError: Cannot read property 'add' of null
查看上面的更新并尝试这样做 :).. 并且不要在开始时初始化 slick。只需在请求 ajax 请求后初始化即可。
遇到了同样的错误。顺便说一句，似乎有语法错误
嗯，这是我的解决方案 =) 尝试调整

【解决方案3】：

解决方案

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").not('.slick-initialized').slick(options)
            }, 500);

【讨论】：

【解决方案4】：

这对我有用

fetch('url')
.then(res=> res.json())
.then(data=> {
// result here 
$('.myslider').append('data')
// then,
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1

}

More details here

【讨论】：