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

Question

[Никита]

Всем привет, нужно сделать слайдер в две строки на десктопе, который адаптируется в одну на мобильных устройствах, подскажите как сделать. Попробовал реализовать на slick, но то ли руки кривые, то ли не работает, вот что получилось https://jsfiddle.net/5h9183pu/. Гугл тоже ничего толкового не выдал

Answer 1

[axe280]

Поковырял, видимо не умеет этот плагин так делать, у самого такая задача.

Comments

[axe280]

Решение тут stackoverflow.com/questions/33800622/slick-carouse...

Answer 2

[VivaLaGleb]

Умеет это делать плагин, смотрите документацию: kenwheeler.github.io/slick раздел Responsive Display.

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  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
      }
    }
  ]
});

breakpoint - min-width экрана в пикселях при которой срабатывают настройки

Соответсвенно прописываете rows: 2 в нужный вам блок настроек breakpoint