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

Question

我正在使用Slick插件来实现轮播图功能，当页面加载时一切正常。但是我想要的是在通过Ajax调用检索新数据时仍然保留Slick轮播图效果，目前我失去了这个效果。

我将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？

- Richlewis

---

程序是否到达成功函数处理程序？ - web-nomad

是的，它确实可以，那么我可能漏掉了什么吗？ - Richlewis

由于走马灯已经初始化，您需要在重新初始化之前删除该事件处理程序。只是猜测。 - web-nomad

抱歉，这可能是一个愚蠢的问题，但您能提供一个例子吗？ - Richlewis

请查看我的答案。 - web-nomad

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

- Minoru

---

对于我而言，我必须使用 $('.slick-media').slick('unslick').slick('reinit');。 - Joseph Marikle

这对我有用，@JosephMarikle 这种方法的文档在哪里？我没有看到它被列出来？ - Tom Bird

它救了我的一天。谢谢。 - Gaurav

在我的情况下，我只是调整窗口大小，由此，我从2张幻灯片过渡到1张。仅仅调用.slick()函数并没有起作用。然而，我先运行了.slick('unslick')，然后重新运行了slick()函数。完美运行。 - sea26.2

Answer 2

最好的方法是在重新初始化 slick slider 后销毁它。

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

- Chirag Prajapati

Answer 3

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

- Mihir Bhatt

Answer 4

这应该可以正常工作。

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

- jdavid.net

---

"reInit"是一个流畅的事件（可以监听以查看何时重新初始化），而不是可以调用以重新初始化走马灯的方法。 - mcrider

mcrider，你确定不是两者都有吗？ - jdavid.net

根据他们的文档，这只是一个事件（event）。但我刚刚在我的旋转木马（carousel）之一上尝试了这种方法，似乎确实有效。 - mcrider

我尝试过它，但它导致了我的页面崩溃。后来我发现销毁并重新初始化是更成功的方法。也许自2016年以来脚本已经有了一些更新？ - dearsina

@mcrider 插件有一个原型函数 reinit，它被调用是因为.slick('reinit')只是执行了传递字符串名称的函数。由于插件文档没有提到这一点，我不会使用它，因为可能会产生意想不到的副作用（如崩溃浏览器）。使用.slick('unslick')然后.slick(config)可能更可靠。 - Simon

Answer 5

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

有一个unslick方法，可以取消初始化走马灯，因此您可以在重新初始化之前尝试使用该方法。

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

希望这能有所帮助。

- web-nomad

---

谢谢，你在评论中指出的问题现在更加清晰了。不幸的是，我遇到了一个错误 TypeError: _.$slides is null if (_.$slides.parent().hasClass('slick-track')) { 所以我认为它还没有被取消轮播，但我会继续研究的，再次感谢。 - Richlewis

更新：语法现在为：$(slider).slick('unslick'); - Ryan Weiss

Answer 6

我遇到了一个问题，Slick轮播图在新数据上无法刷新，而是将新幻灯片附加到先前的幻灯片上，我找到了一个解决方案，这非常简单。

TL;DR
Try passing unslick, then assign your new data which is being rendered inside slick carousel, and then initialize slick again. these were the steps for me:

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。

- Junaid

Answer 7

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

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

- Lahiru Dilshan

Answer 8

大家准备好了吗！

它对我很有帮助——最初的回答。

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

- Dmitry Shulga

Answer 9

在ajax调用开始之前，我必须取消走马灯的效果，但是只有在已经存在slick走马灯时才能这样做。因此，我设置一个变量为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++;

        }

- A.Clifford

Answer 10

最好的方法是使用unslick设置或函数（根据您使用的slick版本而定），如其他答案中所述，但这对我没有起作用。 我从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() 调用正常工作，只要您没有设置任何销毁触发器，就应该没问题。

- Tejas Kemkar