Я добавил слайдер Slick для любого устройства с разрешением менее 1024 пикселей, однако каждый раз, когда нажимается кнопка в элементе 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, но все еще безрезультатно.Класс .slick-initialized просто исчезает при событии щелчка.