Javascript 成功调用ajax后重新初始化Slick js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27795730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reinitialize Slick js after successful ajax call
提问by Richlewis
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.
我正在使用 Slick 进行轮播实现，页面加载时一切正常。我想要实现的是，当我进行 Ajax 调用以检索新数据时，我仍然想要 slick 轮播实现，但此刻我失去了它。
I have put the call for slick into a function
我已经把对 slick 的调用放到了一个函数中
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();
}
});
But the function isn't being called. How can I reinitialize this js?
但是没有调用该函数。我怎样才能重新初始化这个js？
回答by Minoru
You should use the unslick method:
你应该使用 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 */
}
});
回答by Chirag Prajapati
The best way is you should destroy the slick slider after reinitializing it.
最好的方法是在重新初始化后销毁光滑的滑块。
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();
}
});
回答by jdavid.net
This should work.
这应该有效。
$.ajax({
type: 'get',
url: '/public/index',
dataType: 'script',
data: data_send,
success: function() {
$('.skills_section').slick('reinit');
}
});
回答by Mihir Bhatt
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1
回答by A.Clifford
I had to unslick the carousel before the ajax call starts, but you can't do that until there is already a slick carousel. So, I set a variable to 0 and only run unslick after it changed
在 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++;
}
回答by web-nomad
Note: I am not sure if this is correct but you can give it a try and see if this works.
注意：我不确定这是否正确，但您可以尝试一下，看看这是否有效。
There is a unslickmethod which de-initializes the carousel, so you might try using that before re-initializing it.
有一种unslick方法可以取消初始化轮播，因此您可以在重新初始化之前尝试使用该方法。
$.ajax({
type: 'get',
url: '/public/index',
dataType: 'script',
data: data_send,
success: function() {
$('.skills_section').unslick(); // destroy the previous instance
slickCarousel();
}
});
Hope this helps.
希望这可以帮助。
回答by Tejas Kemkar
The best way would be to use the unslicksetting or function(depending on your version of slick) as stated in the other answers but that did not work for me. I'm getting some errors from slick that seem to be related to this.
最好的方法是使用unslick其他答案中所述的设置或功能（取决于您的 slick 版本），但这对我不起作用。我从 slick 中得到了一些似乎与此有关的错误。
What did work for now, however, is removing the slick-initializedand slick-sliderclasses from the container before reinitializing slick, like so:
然而，现在有效的是在重新初始化 slick 之前从容器中删除slick-initialized和slick-slider类，如下所示：
function slickCarousel() {
$('.skills_section').removeClass("slick-initialized slick-slider");
$('.skills_section').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
}
Removing the classes doesn't seem to initiate the destroy event(not tested but makes sense) but does cause the later slick()call to behave properly so as long as you don't have any triggers on destroy, you should be good.
删除类似乎不会启动销毁事件（未经测试但有意义），但确实会导致后面的slick()调用行为正常，因此只要您在销毁时没有任何触发器，就应该很好。
回答by Lahiru Dilshan
Try this code, it helped me!
试试这个代码，它帮助了我！
$('.slider-selector').not('.slick-initialized').slick({
dots: true,
arrows: false,
setPosition: true
});
回答by Dmitry Shulga
Here we go, guys! It helped me
来吧，伙计们！它帮助了我
$('.slick-slider').not('.slick-initialized').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false,
touchThreshold: 9
});
回答by Junaid
I was facing an issue where Slick carousel wasn't refreshing on new data, it was appending new slides to previous ones, I found an answer which solved my problem, it's very simple.
我遇到了一个问题，即 Slick carousel 没有刷新新数据，而是将新幻灯片附加到以前的幻灯片中，我找到了解决我问题的答案，这非常简单。
try unslick, then assign your new data which is being rendered inside slick carousel, and then initialize slick again. these were the steps for me:
尝试 unslick，然后分配在 slick carousel 中呈现的新数据，然后再次初始化 slick。这些是我的步骤：
jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick options});
Note: check slick website for syntax just in case. also make sure you are not using unslick before slick is even initialized, what that means is simply initialize (like this jquery('.my-class').slick({options}); the first ajax call and once it is initialized then follow above steps, you may wanna use if else
注意：为了以防万一，请检查漂亮的网站的语法。还要确保在 slick 初始化之前没有使用 unslick，这意味着简单地初始化（像这样jquery('.my-class').slick({options}）；第一个 ajax 调用，一旦它被初始化，然后按照上面的步骤，你可能想使用 if else
