Вызов slickslider для адаптивного сайта
Для слайдеров/каруселей нравится использовать slick slider. Самая большая его ценность в умении делать зависимые карусели. Эта особенность делает его очень гибким для внедрения в верстку.
Однако есть и несколько проблем в его использовании. Например, при адаптивной верстки у него проблемы с перезапуском. Например, в десктопном исполнении нам не нужен слайдер, а должны выводится только несколько изображений. При постепенном уменьшении размера браузера должен активироваться слайдер, и потом уменьшаться кол-во видимых слайдов. При увеличении экрана — процесс в обратном порядке. В десктопе слайдер должен отключиться.
Как я понял, это должно было работать так
Пришел к такому виду вызова slick слайдера как оптимальному (ИМХО). Так как не работает нормально параметр unslick.
Однако есть и несколько проблем в его использовании. Например, при адаптивной верстки у него проблемы с перезапуском. Например, в десктопном исполнении нам не нужен слайдер, а должны выводится только несколько изображений. При постепенном уменьшении размера браузера должен активироваться слайдер, и потом уменьшаться кол-во видимых слайдов. При увеличении экрана — процесс в обратном порядке. В десктопе слайдер должен отключиться.
Как я понял, это должно было работать так
$('.proekt__list').slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: true,
centerPadding: '0px',
centerMode: true,
focusOnSelect: true,
adaptiveHeight: true,
responsive: [{
breakpoint: 99999,
settings: "unslick"
}, {
breakpoint: 768,
settings: {
slidesToShow: 1,
arrows: true,
}
}, {
breakpoint: 374,
settings: {
slidesToShow: 1,
arrows: false,
}
}]
});
И оно работает при первом запуске, но стоит несколько раз изменить размер окна браузера — и все перестает нормально работать.Пришел к такому виду вызова slick слайдера как оптимальному (ИМХО). Так как не работает нормально параметр unslick.
var main_product_slider = false;
initMainProductSlider = function() {
selector = '.product-slider';
if ($(window).width()<1050) {
if (!main_product_slider) {
$(selector).slick({
'autoplay': false,
'arrows': false,
'dots': true,
'slidesToShow': 3,
'slidesToScroll': 1,
'initialSlide': 1,
'infinite': false,
'adaptiveHeight': true,
'responsive': [
{
breakpoint: 750,
settings: {
vertical: false,
dots: false,
slidesToShow:2
}
},
{
breakpoint: 450,
settings: {
vertical: false,
dots: true,
slidesToShow: 1
}
}
]
});
main_product_slider = true;
}
} else {
if (main_product_slider) {
$(selector).slick('unslick');
main_product_slider = false;
}
}
};
Добавляю вызов функции при загрузке страницы$(function() {
initMainProductSlider();
});
Вешаю выполнение на resize страницыvar doresizepage;
$(window).resize(function(){
clearTimeout(doresizepage);
doit = setTimeout(resizepage, 100);
});
function resizepage(){
initMainProductSlider('.product-slider');
}
Нет комментариев