成功调用ajax后重新初始化Slick js [英] Reinitialize Slick js after successful ajax call

问题描述

我正在使用Slick进行轮播实现，当页面加载时一切正常。我想要实现的是当我进行Ajax调用以检索新数据时，我仍然想要光滑的轮播实现，此刻我失去它。

I am using Slick for a carousel implementation and everything works fine when the pages loads.What I am trying to achieve is that when i make an Ajax call to retrieve new data I still want the slick carousel implementation, at the moment i lose it.

我把光滑的电话放入了一个功能

I have put the call for slick into a function

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

然后我在成功回调中调用该函数

and then I call the function within my success callback

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

但该函数未被调用。如何重新初始化这个js？

But the function isn't being called. How can I reinitialize this js?

推荐答案

你应该使用unslick方法：

You should use the unslick method:

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

这篇关于成功调用ajax后重新初始化Slick js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！