На странице карусели приведены примеры, и среди них — «Filtering». Предлагаю им и воспользоваться.
- Задаём нужные брекпоинты в параметрах карусели (
responsive
).
- Перехватываем событие
breakpoint
и проверяем у объекта slick
свойство activeBreakpoint
.
- Обработчик события
breakpoint
получает три аргумента — объект события event
, объект карусели slick
и новое значение breakpoint
. Можно было бы этим третьим аргументом и воспользоваться, но на заключительном шаге мы повесим этот же обработчики и на событие init
, у которого такого аргумента нет. Поэтому всё-таки slick.activeBreakpoint
.
- Когда ширина окна превысит все заданные брекпоинты,
activeBreakpoint
станет null
. Этот случай надо учесть при проверке.
- По ситуации вызываем методы
slickFilter
и slickUnfilter
:
slickFilter
Аргумент filter
: селектор или функция.
Фильтрует слайды, используя синтаксис метода .filter
из jQuery.
slickUnfilter
Удаляет фильтр.
- Чтобы не дёргать их зазря, добавляем флаг
onFiltered
.
- Эти методы запускают переинициализацию карусели, и тогда снова всплывает событие
breakpoint
. А мы как раз по этому событию ставим и снимаем фильтр. Чтобы не попасться в бесконечный цикл, добавим флаг onChanging
.
- Когда нашу страницу откроют с мобильного, фильтр понадобится уже при инициализации карусели. Поэтому вешаем такой же обработчик и на событие
init
. Но помним, что его нужно задать до того, как инициализировать карусель.
Рабочий пример: https://codepen.io/glebkema/pen/NaGGzv
В нём у трёх слайдов из шести стоит класс .hide-on-mobile
. Они видны, только когда окно шире 700
пикселей. Переходы при 500
и 900
пикселях добавил, чтобы протестировать устойчивость решения.
var breakpointMobile = 700,
isChanging = false,
isFiltered = false;
$('#breakpointMobile').text( breakpointMobile );
$('#myCarousel').on('init breakpoint', function(event, slick){ /** пункты 2 и 6 **/
if ( ! isChanging ) { /** пункт 5 **/
$('#breakpointValue').text( String(slick.activeBreakpoint) );
isChanging = true;
if ( slick.activeBreakpoint && slick.activeBreakpoint <= breakpointMobile) {
if ( ! isFiltered ) {
slick.slickFilter(':not(.hide-on-mobile)'); /** пункт 3 **/
isFiltered = true; /** пункт 4 **/
}
} else {
if ( isFiltered ) {
slick.slickUnfilter();
isFiltered = false;
}
}
isChanging = false;
}
}).slick({
autoplay: true,
dots: true,
responsive: [ /** пункт 1 **/
{ breakpoint: 500 },
{ breakpoint: 700 },
{ breakpoint: 900 }
]
});
body { /** для красоты **/
font-family: 'Open Sans', sans-serif;
}
.my-carousel img {
width: 100%;
}
.my-carousel .slick-next {
right: 15px;
}
.my-carousel .slick-prev {
left: 15px;
z-index: 1;
}
<h3>Слайды 2, 3 и 5 скрыты, пока окно не шире <span id="breakpointMobile"></span> пикселей</h3>
<p>activeBreakpoint = <b id="breakpointValue"></b></p>
<div id="myCarousel" class="my-carousel">
<div>
<img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
</div>
<div class="hide-on-mobile">
<img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
</div>
<div class="hide-on-mobile">
<img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/c33/f66/?text=4" alt="">
</div>
<div class="hide-on-mobile">
<img src="https://via.placeholder.com/900x300/099/3cc/?text=5" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/f93/fc6/?text=6" alt="">
</div>
</div>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>