How to make a slider (slick) adaptive?

Question

css

Good afternoon, I used to always use bootstrap, so there were no particular problems with adaptability ... but I decided to try to make something at least somehow adaptively without it ... and even in a stupor. But in a stupor because of the slider.
Tell me how? Preferably chewed, as I've been fighting for 2-3 hours ...
website

Answer 1

Actually something similar to media expressions only for the slider. Here are all the settings.

$('.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
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

Answer 2

Krch decided, xs why, but he prescribed display:flex for the slider wrapper. That's all to hell and went, returned to the block and everything became type top;)