@SergejDudn

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

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

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

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

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
от 10 000 до 15 000 руб.
15 авг. 2018, в 23:38
300 руб./за проект
15 авг. 2018, в 22:39
60000 руб./за проект
15 авг. 2018, в 21:18
30000 руб./за проект