В slick slider не работают настройки responsive, если слайдер вызван через This, что делать?
Есть ситуация, кнопки слайдера вынесены за пределы самого слайдера. Самое простое было бы для каждого слайдера сделать свой уникальный класс и кнопки со своим уникальным классом. Но так как таких слайдеров на странице может быть много, то для того, чтобы не делать под каждый слайдер свой вызов, делаю вызов слайдера таким образом:
jQuery( '.slider-doctors' ).each( function() {
jQuery( this ).slick( {
slidesToShow: 2,
prevArrow: jQuery(this).parents('.slider-wrap').find('.slick-prev'),
nextArrow: jQuery(this).parents('.slider-wrap').find('.slick-next'),
responsive: [
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
} );
} );
В результате настройки, заданные для медиа-запросов (меньше 480px), срабатывают только после ресайза страницы. А при загрузке параметр slidesToShow выводит два слайда. Хотя если поресайзить страницу или повертеть смартфон горизонтально-вертикально, то кол-во слайдов становится 1, как и должно быть. Подскажите, можно ли как-то доделать вызов слайдера, чтобы при загрузке на устройствах и страницах меньше 480px сразу же устанавливался 1 слайд?