成功调用ajax后重新初始化Slick js
我正在使用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(); } });
但是这个function没有被调用。 我怎样才能重新初始化这个js?
您应该使用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 */ } });
这应该工作。
$.ajax({ type: 'get', url: '/public/index', dataType: 'script', data: data_send, success: function() { $('.skills_section').slick('reinit'); } });
最好的方法是在重新初始化之后销毁光滑的滑块。
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(); } });
在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++; }
注意:我不确定这是否正确,但您可以尝试一下,看看是否有效。
有一个unslick
方法可以取消初始化轮播,因此您可以在重新初始化之前尝试使用它。
$.ajax({ type: 'get', url: '/public/index', dataType: 'script', data: data_send, success: function() { $('.skills_section').unslick(); // destroy the previous instance slickCarousel(); } });
希望这可以帮助。
最好的方法是使用unslick
设置或function(取决于你的版本的光滑),如其他答案中所述,但这对我不起作用。 我从浮油中得到一些似乎与此有关的错误。
但是,现在工作的是在重新初始化光滑之前从容器中删除slick-initialized
和slick-slider
类,如下所示:
function slickCarousel() { $('.skills_section').removeClass("slick-initialized slick-slider"); $('.skills_section').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1 }); }
删除类似乎不会启动destroy事件(未经测试但有意义),但确实导致稍后的slick()
调用正常运行,因此只要你没有任何触发器就可以销毁,你应该是好的。
我正面临一个问题,即Slick旋转木马在新数据上没有令人耳目一新,它正在将新幻灯片添加到以前的幻灯片中,我找到了一个解决了我的问题的答案,这非常简单。
尝试unslick,然后分配正在光滑轮播中呈现的新数据,然后再次初始化光滑。 这些是我的步骤:
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
调用请求后,设置超时以初始化滑块滑块。
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超时后初始化。 这对你有用。