拨打 ajax 后 Slick 无法正常工作

Question

这是一个与此处类似的问题。 在成功拨打 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”

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({
        type: "GET",
        url: review_url+"?page="+page,
        success: function(result){

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

Answer 3

这个对我有用

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

}

更多细节在这里

Answer 4

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

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

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

谢谢