在成功的 ajax 调用后重新初始化 Slick js

你应该使用 unslick 方法：

function getSliderSettings(){
  return {
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  }
}
$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    $('.skills_section').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
    $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
    $('.skills_section').slick(getSliderSettings()); /* Initialize the slick again */
  }
});

最好的方法是在重新初始化光滑的滑块后销毁它。

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}
function destroyCarousel() {
  if ($('.skills_section').hasClass('slick-initialized')) {
    $('.skills_section').slick('destroy');
  }      
}
$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    destroyCarousel()
    slickCarousel();
  }
});

$('#slick-slider').slick('refresh'); //Working for slick 1.8.1

这应该有效。

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').slick('reinit');
      }
});

注意：我不确定这是否正确，但您可以尝试一下，看看这是否有效。

有一个unslick方法可以取消初始化轮播，因此您可以在重新初始化轮播之前尝试使用它。

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').unslick();  // destroy the previous instance
        slickCarousel();
      }
});

希望这有帮助。

试试这段代码，它帮助了我！

$('.slider-selector').not('.slick-initialized').slick({
  dots: true,
  arrows: false,
  setPosition: true
});

我必须在 ajax 调用开始之前取消旋转木马，但在已经有一个光滑的轮播之前你不能这样做。因此，我将变量设置为 0，并且仅在更改后不流畅地运行

var slide = 0
if(slide>0)      
$('#ui-id-1').slick('unslick');
        $.ajax({
            //do stuff, here
        },
        success: function( data ) {
            $('#ui-id-1').slick();
            slide++;
        }

最好的方法是使用其他答案中所述的unslick设置或功能（取决于您的 slick 版本），但这对我不起作用。我从光滑中得到一些似乎与此相关的错误。

但是，现在有效的是在重新初始化 slick 之前从容器中删除 slick-initialized 和 slick-slider 类，如下所示：

function slickCarousel() {
    $('.skills_section').removeClass("slick-initialized slick-slider");
    $('.skills_section').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}

删除类似乎不会启动销毁事件（未测试但有意义），但确实会导致后面的slick()调用行为正常，因此只要您在销毁时没有任何触发器，您应该很好。

我遇到了一个问题，即 Slick 轮播没有刷新新数据，而是将新幻灯片附加到以前的幻灯片中，我找到了一个解决我问题的解决方案，这很简单。

TL;DR
尝试传递 unslick，然后分配在光滑轮播中呈现的新数据，然后初始化光滑再。这些是我的步骤：

jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick-options});

注： 检查光滑.js网站的语法以防万一 。此外，请确保在初始化光滑之前没有使用不光滑。这意味着，只需像这样初始化第一个 ajax 调用
jquery('.my-class').slick({slick-options}) 初始化后，请按照上述步骤操作。您可能希望使用 if-else。

伙计们，我们开始吧！它帮助了我

$('.slick-slider').not('.slick-initialized').slick({
   infinite: false,
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   touchThreshold: 9
});

光滑版本：1.8.0

 function getSliderSettings() {
                return {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    loop: true,
                    arrows: true,
                    dots: false,
                }
            }
    
    
    $.ajax({
            type: 'get',
            url: '/public/index',
            dataType: 'html',
            data: some_data,
            success: function(response) {
                    $('[data-role="slick-slider"]').slick('unslick');
                    $('[data-role="slick-slider"]').html($(response).html());
                    $('[data-role="slick-slider"]').slick(getSliderSettings());
              }
        });

虽然上面的答案是正确的，但在数组更新后显示具有更新/新数据的新幻灯片，然后需要刷新光滑的滑块实例，还有一个问题。

如果我们不这样做，那么即使数组已经更新，slick 也会以某种方式继续显示更新数组之前绑定在那里的旧数据。

因此，具有较新框架和 ES6 方法的代码可能如下所示。

假设我们通过现代库（如 vue、React、angular 或 alpine js）中的循环显示数据数组，并且我们有shops数组显示为滑块。

每次有人触发某个动作时，数组（最终 dom）都会更新，但我们必须手动告诉光滑的滑块根据新数组中的数据更新幻灯片数据。 这里我们有shops数组形式的数据。

  {
        shops: [],
        init() {
            let self = this;
            // watch for your data and provide callback function after it has been updated
            // this $watch is example from alpine js but similar could be available in other framrworks
            self.$watch('shops',(currentShops,oldShops) => {
                //currentshops holds the new value of shops after update
                //oldShops holds older value before update
                //first remove all slides that were attached with slick before shops array was updated (sorted for example)
                $('#shops-section-slider.slick-initialized').slick('slickRemove', null, null, true);
                //After this, add new slides after shops has been updated(sorted)
                // via template that accepts shop as an argument
                currentShops.forEach(function(shop,index) {
                    $('#shops-section-slider.slick-initialized').slick('slickAdd', self.getSliderTmpl(shop));
                })
                //after adding and removing is completed, 
                //finally just call refresh to prevent reinit entirely.
                $('#shops-section-slider.slick-initialized').slick('refresh');
            })
            //shopsPromise only does slider creation and other things when data has been updated in dom.
            shopsPromise.then(function(data) {
                //update shops here via data that has been recieved
                shops.push(data)
            }).then(function() {
                //crate slider after promise is resolved
                $('#shops-section-slider').not('.slick-initialized').slick({
                    //your slick settings
                })
            });
        },
        
        getSliderTmpl(shop) {
            return `<div class="col-12 col-md-6 col-lg-4 col-xl-4 d-flex flex-column shops-section">
                <div class="row flex-grow-1 flex-column flex-xxl-row">
                    <div class="col-12 col-xxl-6">
                        <div class="shops-img position-relative">
                            <strong class="shops-title-card d-block d-xxl-none">${shop.whateveravailable}</strong>
                        </div>
                    </div>
                    
                </div>
            </div>`;
        }
    }

在 HTML 内部，我们甚至不需要在 Alpine JS 中用作循环的 <template> 元素，因为它由于那里的多一张幻灯片而产生不正确的宽度和问题，因此我们可以省略它，从而仅从 js 管理整个滑块数据和模板。

<div class="row shops-section-wrapper" id="shops-section-slider"></div>

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

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