Как на мобильном спрятать слайд из Slick-карусели?

246

19 сентября 2017, 08:10

Использую карусель Slick в одном из проектов. Поставил в неё пять слайдов — четыре картинки и видео.

Теперь хочу на мобильниках (до 768 пикселей) показывать только картинки, без видео. Пробовал прятать блок с видео через стили, но безуспешно.

Как бы этого добиться? Кто-нибудь сталкивался?

Answer 1

На странице карусели приведены примеры, и среди них — «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 скрыты, пока окно не&nbsp;шире <span id="breakpointMobile"></span>&nbsp;пикселей</h3> 
<p>activeBreakpoint = <b id="breakpointValue"></b></p> 
 
<div id="myCarousel" class="my-carousel"> 
  <div> 
    <img src="//placehold.it/900x300/c69/f9c/?text=1" alt=""> 
  </div> 
  <div class="hide-on-mobile"> 
    <img src="//placehold.it/900x300/9c6/cf9/?text=2" alt=""> 
  </div> 
  <div class="hide-on-mobile"> 
    <img src="//placehold.it/900x300/69c/9cf/?text=3" alt=""> 
  </div> 
  <div> 
    <img src="//placehold.it/900x300/c33/f66/?text=4" alt=""> 
  </div> 
  <div class="hide-on-mobile"> 
    <img src="//placehold.it/900x300/099/3cc/?text=5" alt=""> 
  </div> 
  <div> 
    <img src="//placehold.it/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>