Как взаимодействовать с breakpoint в slick slider?

Question

Как правильно взаимодействовать с breakpoint в slick. нужно, чтобы слайдер не был активным на ноутбуках и других больших экранах, а был лишь активен на мобильных устройствах и планшетах. подскажите пожалуйста, как это сделать с помощью свойства responsive?

$('.slider').slick({
    dots: true,
    responsive: [{
            breakpoint: 1024,
            settings: "unslick"
    }]
  });

.slider {
  display: flex;
  
}


.slider-item {
  width: 100px;
  height: 100px;
  background:  #FF6666;
  margin: 30px;
  
}

<link href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
</div>

Answer 1

Не был активным или чтобы не отображался вовсе?

Если сделать неактивным (отключим свайпы)

$('.slider').slick({
    dots: true,
    responsive: [{
            breakpoint: 1024,
            swipe: false
    }]
 });

Если хотим показать только на тач

@media (pointer:coarse){
/* Данный медиа-запрос позволит отдельно прописывать стили только для устройств с поддержкой тач, либо так же но с помощью медиа запросов на ширину дисплея */
  .slick {
    display: flex
  }
}

.slick {
  display: none
}

БЛОГ НА HUSL

Как взаимодействовать с breakpoint в slick slider?

Ответы (1 шт):