@SergejDudn

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

Здравствуйте!
Необходимо сделать адаптивный слайдер, с одной или двумя строками (в зависимости от ширины устройства)
У плагина Slick есть настройка на две или более строки, но есть один ньюанс: в первой и второй строках разное количество слайдов должно быть (в первой две, во второй 3)
desktop: prntscr.com/ik1eki
tablet: prntscr.com/ik1db8
mobile: prntscr.com/ik1eck
Есть ли какие-нибудь идеи как выводить разное количество слайдов, или может плагины под такой слайдер
Спасибо!
  • Вопрос задан
  • 381 просмотр
Пригласить эксперта
Ответы на вопрос 1
SKolt
@SKolt
https://www.instagram.com/seregamih/
Если я правильно понял вопрос. У слайдера есть специальная настройка, которая позволяет задавать разные значения в зависимости от ширины экрана.

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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы