Answer the question
In order to leave comments, you need to log in
How to make slick-slider fire on page resize?
Good afternoon.
There is a page with three sliders on it. All sliders are made on slick. One of them works at all resolutions (it's fine), and the other two should only be enabled on mobile (480px and below). They work. Only there is a problem. If you resize the page up, then these two sliders are disabled and the slides line up in the blocks I need, but if you reduce the window, only css changes work, but the slider does not turn on. You have to reload the page for it to work.
Page with the problem
I will even accept a crutch solution, although ideally I would like to understand it in detail.
Answer the question
In order to leave comments, you need to log in
// Подпишемся на ресайз и продиспатчим его для запуска
$(window).on('resize', function(e){
// Переменная, по которой узнаем запущен слайдер или нет.
// Храним её в data
var init = $(".card-box").data('init-slider');
// Если мобильный
if(window.innerWidth < 480){
// Если слайдер не запущен
if(init != 1){
// Запускаем слайдер и записываем в data init-slider = 1
$('#card-box').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
}).data({'init-slider': 1});
}
}
// Если десктоп
else {
// Если слайдер запущен
if(init == 1){
// Разрушаем слайдер и записываем в data init-slider = 0
$('#card-box').slick('unslick').data({'init-slider': 0});
}
}
}).trigger('resize');
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question