How to make a responsive slider with two rows?

Question

css

Hello!
It is necessary to make an adaptive slider, with one or two lines (depending on the width of the device)
The Slick plugin has a setting for two or more lines, but there is one caveat: the first and second lines should have a different number of slides (the first two, the second 3)

Are there any ideas how to display a different number of slides, or maybe plugins for such a slider
Thank you!

Answer 1

If I understand the question correctly. The slider has a special setting that allows you to set different values ​​depending on the screen width.

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
      }
    }
 ]

That is: we set the parameter responsive: [] , and inside the square brackets, in curly brackets we set the breakpoint , specify the screen width and the slider settings for this width.
kenwheeler.github.io/slick
Look on the page, there is an example of the code that I gave above. It's called Responsive Display