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

【问题标题】：Reinitialize Slick js after successful ajax call成功调用 ajax 后重新初始化 Slick js
【发布时间】：2015-01-06 09:30:59
【问题描述】：

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

我已将 slick 调用放入函数中

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？

【问题讨论】：

程序是否到达成功函数处理程序？
是的，我会遗漏什么吗？
由于轮播已经初始化，您需要在重新初始化之前删除该事件处理程序。只是猜测
对不起，如果这是一个愚蠢的问题，但请你提供一个例子
请看我的回答

标签： javascript jquery ajax slick.js

【解决方案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 */
  }
});

【讨论】：

对我来说我必须使用$('.slick-media').slick('unslick').slick('reinit');
这对我有用，@JosephMarikle 是否有关于这种方法的文档我没有看到它列出来？
它拯救了我的一天。谢谢
在我的例子中，我只是调整了窗口的大小，因此，我从 2 张幻灯片转换为 1 张幻灯片。简单地调用 .slick() 函数不起作用。但是，我跑了 .slick('unslick');然后重新运行 slick() 函数。完美运行

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这应该可行。

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

【讨论】：

'reInit' 是一个 slick 事件（可以在 slick 重新初始化时进行监听），而不是可以调用来重新初始化轮播的方法。
mcrider，你确定不是两者兼而有之吗？
根据他们的文档，这只是一个事件。但我只是在我的一个旋转木马上尝试了这种方法，它确实似乎有效。
我试过了，它让我的页面崩溃了，我发现销毁它并重新初始化它是一种更成功的方法。也许自 2016 年以来脚本有一些更新？
@mcrider 该插件有一个prototype function reinit 被调用，因为.slick('reinit') 只是使用传递的字符串的名称执行函数。由于插件的文档没有提到这一点，但我不会使用它，因为可能会有不需要的副作用（正如浏览器崩溃所经历的那样）。使用.slick('unslick') 然后.slick(config) 可能更可靠。

【解决方案4】：

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

【讨论】：

【解决方案5】：

试试这个代码，它对我有帮助！

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

【讨论】：

【解决方案6】：

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

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

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

希望这会有所帮助。

【讨论】：

谢谢，对您在 cmets 中指出的内容更有意义，不幸的是，我收到了一个错误 TypeError: _.$slides is null if (_.$slides.parent().hasClass('slick-track')) {，所以我假设它并没有那么简单，但我会继续调查它，再次感谢
更新：语法现在是：$(slider).slick('unslick');

【解决方案7】：

我必须在 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++;

        }

【讨论】：

【解决方案8】：

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

然而，现在起作用的是在重新初始化 slick 之前从容器中删除 slick-initialized 和 slick-slider 类，如下所示：

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

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

【讨论】：

【解决方案9】：

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

TL;DR
尝试传递 unslick，然后分配在 slick carousel 中呈现的新数据，然后初始化 slick 再次。这些是我的步骤：
jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick-options});

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

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

【讨论】：