Как получить отзывчивую страницу, используя плагин Slick для скользящего изображения, используя класс .your и класс из нескольких элементов для телефона, планшета

Question

Я хочу создать веб-страницу, которая для экрана телефона показывает одно изображение, но я могу перейти к следующему и предыдущему изображению. Затем для экрана планшета есть 2 изображения слайд на следующие два изображения и 2 предыдущих изображения. назвать это в медиа-запрос? каждый из них работает правильно, но я хочу привести их все в разном размере экрана?

// showing single item 
    $('.your-class').slick();

// showing tablet
  $('.multiple-items').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 2
    });

// SHOWING 4 COLUMN desktop
    $('.multiple-items4').slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 4
});

Answer 1

вам нужно дать контрольные точки для отзывчивости.

$ ('. Отзывчивый'). Slick ({точки: истина, бесконечность: ложь, скорость: 300, слайдыToShow: 4, слайдыToScroll: 4, отзывчивые : [{точка останова: 1024, настройки: {slidesToShow: 3, slidesToScroll: 3, бесконечный: true, точки: true}}, {точка останова: 600, настройки: {slidesToShow: 2, slidesToScroll: 2}}, {точка останова: 480 , settings: {slidesToShow: 1, slidesToScroll: 1}} // Теперь вы можете отсоединиться от заданной точки останова, добавив: // settings: "unslick" // вместо объекта настроек]});

Answer 2

да, получил большое спасибо, этот код работает сейчас. $ ('. Response'). Slick ({точек: истина, бесконечность: ложь, скорость: 300, слайдыToShow: 4, слайдыToScroll: 4, отзывчивые: [{точка останова: 1024, настройки: {slidesToShow: 3, слайдыToScroll: 3, infinite: true, многоточие: true}}, {точка останова: 600, настройки: {slidesToShow: 2, slidesToScroll: 2}}, {точка останова: 480, настройки: {slidesToShow: 1, slidesToScroll: 1}} // Вы можете не скользить в данный момент останова, добавив: // settings: "unslick" // вместо объекта настроек]});