Question

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

我已将光滑的调用放入函数

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

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

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

但是没有调用该函数。我怎样才能重新初始化这个js？

Answer 1

您应该使用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 */
  }
});

Answer 2

这应该有用。

MS Word 2010

Answer 3

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

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

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

希望这有帮助。

Answer 4

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

var slide = 0
if(slide>0)      
$('#ui-id-1').slick('unslick');

        $.ajax({
            //do stuff, here
        },
        success: function( data ) {

            $('#ui-id-1').slick();
            slide++;

        }

Answer 5

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

现在可以使用的是在重新初始化光滑之前从容器中删除slick-initialized和slick-slider类，如下所示：

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

删除类似乎没有启动销毁事件（未经测试但有意义），但确实导致后来的slick()调用行为正常，只要您没有在破坏时触发，你应该是好的。

Answer 6

我遇到了一个问题，Slick轮播在新数据上并不令人耳目一新，它将新幻灯片添加到以前的幻灯片中，我找到了一个解决了我的问题的答案，它非常简单。

尝试取消单击，然后分配正在光滑轮播中呈现的新数据，然后再次初始化光滑。这些是我的步骤：

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

注意：为了以防万一，请检查光滑的网站以获取语法。还要确保在光滑甚至初始化之前你没有使用unslick，这意味着只需初始化（如jquery('.my-class').slick({options}）;第一个ajax调用，一旦初始化，然后按照上面的步骤，你可能想使用if else

Answer 7

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

setState()

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

Answer 8

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

Answer 9

伙计们，我们在这里！它帮助了我

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

Answer 10

尝试此代码，对我有帮助！

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

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

10 个答案:

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