我为1024px以下的任何设备添加了Slick滑块,但是,每次单击div中的一个按钮并刷新页面时,该滑块就会消失,并且会留下一团糟。如果我从控制台更改设备宽度,它将自行修复。我尝试添加一个函数,每次单击按钮时都将其初始化,但是由于某些原因,'reInit'无法正常工作。我无法提供Jsfiddle,如果有人可以根据我的描述提供帮助,我将不胜感激。
function slickify(){
event.preventDefault();
$('.cart-list').not('.slick-initialized').slick({
infinite: false,
responsive: [
{
breakpoint: 1024,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
dots: true
}
},
{
breakpoint: 786,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
},
{
breakpoint: 550,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
}
]
});
}
$(window).resize(function(){
event.preventDefault();
var $windowWidth = $(window).width();
if ($windowWidth < 1024) {
slickify();
$(window).resize(function() {
$('.cart-list').slick('resize');
event.preventDefault();
});
$(window).on('orientationchange', function() {
$('.cart-list').slick('resize');
event.preventDefault();
});
}
});
$('.cart-list').on('click', function() {
$('.cart-list').slick('reInit');
});
});
我尝试添加一个简单的功能,例如:
('body').on('click', function() {
('.slick-slider-div').slick('reInit');
});
其中reInit根据Slick.JS文档进行了重新初始化。但是,它会中断页面上的所有click事件。我还尝试仅使div带有click事件,但仍然没有结果。 “ .slick-initialized”类仅在发生点击事件时消失。