Как сделать адаптивный слайдер с двумя строками?

Question

[SergejDudn]

Здравствуйте!
Необходимо сделать адаптивный слайдер, с одной или двумя строками (в зависимости от ширины устройства)
У плагина Slick есть настройка на две или более строки, но есть один ньюанс: в первой и второй строках разное количество слайдов должно быть (в первой две, во второй 3)

Есть ли какие-нибудь идеи как выводить разное количество слайдов, или может плагины под такой слайдер
Спасибо!

Answer 1

[Сергей]

Если я правильно понял вопрос. У слайдера есть специальная настройка, которая позволяет задавать разные значения в зависимости от ширины экрана.

responsive: [ //указываем настройки для адаптивного слайдера.
    {
      breakpoint: 1024, //указываем ширину экрана
      settings: { //здесь настройки слайдера для этой ширины
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
 ]

То есть: задаём параметр responsive: [], и внутри квадратных скобок, в фигурных скобках задаём breakpoint, указываем ширину экрана и настройки слайдера для этой ширины.

kenwheeler.github.io/slick

Поищите на странице, там есть пример кода, который я привел выше. Он так и называется Responsive Display