0

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

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

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

1

1 ответ 1

0

На странице карусели приведены примеры, и среди них — «Filtering». Предлагаю им и воспользоваться.

  1. Задаём нужные брекпоинты в параметрах карусели (responsive).
  2. Перехватываем событие breakpoint и проверяем у объекта slick свойство activeBreakpoint.
    • Обработчик события breakpoint получает три аргумента — объект события event, объект карусели slick и новое значение breakpoint. Можно было бы этим третьим аргументом и воспользоваться, но на заключительном шаге мы повесим этот же обработчики и на событие init, у которого такого аргумента нет. Поэтому всё-таки slick.activeBreakpoint.
    • Когда ширина окна превысит все заданные брекпоинты, activeBreakpoint станет null. Этот случай надо учесть при проверке.
  3. По ситуации вызываем методы slickFilter и slickUnfilter:

slickFilter
Аргумент filter: селектор или функция.
Фильтрует слайды, используя синтаксис метода .filter из jQuery.

slickUnfilter
Удаляет фильтр.

  1. Чтобы не дёргать их зазря, добавляем флаг onFiltered.
  2. Эти методы запускают переинициализацию карусели, и тогда снова всплывает событие breakpoint. А мы как раз по этому событию ставим и снимаем фильтр. Чтобы не попасться в бесконечный цикл, добавим флаг onChanging.
  3. Когда нашу страницу откроют с мобильного, фильтр понадобится уже при инициализации карусели. Поэтому вешаем такой же обработчик и на событие 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="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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.