media запрос в jquery

Рейтинг: 0Ответов: 1Опубликовано: 02.04.2023

Подскажите пожалуйста: у меня подключен слайдер через slick на jquery. В обычном размере у меня 3 слайда, при размере экрана в 620px, вместо 3 слайдов у меня должно становится 2 слайда, а при 460px, должен остаться 1 слайд. Вроде все логично, но везде в примерах прописаны переменные, а у меня без нее, в связи с этим начинаю путаться.введите сюда описание изображения

$(document).ready(function () {
  $(".slider_box").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    prevArrow: "<div class='slider_prev'></div>",
    nextArrow: "<div class='slider_next'></div>",
  });
});

jquery slick.js media-queries
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Нужно читать документацию, хоть у Slick документация не очень удобная, но она есть.
Там есть описание параметра responsive:

responsive
type: object
default: none
Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint.

Из описания особо ничего не понятно, думаю будет понятнее из примера, который оформил под вашу задачу:
(читайте комментарии к коду)

$('.your-class').slick({
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 3,
  // При изменение размера вьюпорта будут менятся настройки.
  // Те что прописаны выше, как бы "по умолчанию"
  responsive: [
    {
      // breakpoint - это после сколько пикселей будут новые правила
      // если размер вьюпорта <620px (аналог медиа запрос - max-width: 620px)
      breakpoint: 620,
      settings: { // Тут ставим следующие параметры, которые хотим поменять при этом размере экрана
        // В данном примере следующие:
        slidesToShow: 2, // Меняется кол-во отображаемых слайдов, на 2.
        slidesToScroll: 2 // И 2 слайда будут скроллится за раз.
      }
    },
    {
      breakpoint: 460,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
.your-class__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" rel="stylesheet"/>

<div class="your-class">
  <div>
    <div class="your-class__slide">1</div>
  </div>
  <div>
    <div class="your-class__slide">2</div>
  </div>
  <div>
    <div class="your-class__slide">3</div>
  </div>
  <div>
    <div class="your-class__slide">4</div>
  </div>
  <div>
    <div class="your-class__slide">5</div>
  </div>
  <div>
    <div class="your-class__slide">6</div>
  </div>
</div>