Slick Slider: Рецепты, конфиг

Подключение слайдера (типичный конфиг с респонзитивностью):

$('.slider1__container').slick(
    {
    	infinite: true, // бесконечные слайды
    	slidesToShow: 3, // сколько слайдов показать
    	slidesToScroll: 1, // сколько слайдов переключать за раз
    	arrows: false, // точки снизу
    	speed: 300, // скорость переключения слайдов

    	responsive: [
    		{
    			breakpoint: 992, // lg
    			settings: {
					slidesToShow: 3,
					slidesToScroll: 1,
					infinite: true,
				}
    		},
    		{
    			breakpoint: 768, //md
				settings: {
					slidesToShow: 2,
					slidesToScroll: 1,
					infinite: true,
					centerMode: true // 
				}
    		},
    		{
    			breakpoint: 576, // sm
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					infinite: true,
					centerMode: true
				}
    		}
    	]
    }
    );

    // Ресайзим слайдер при изменении ширины страницы
    $(window).resize(function() {
		$('.slider1__container').slick('resize');
	})

    // Кастомные контролы
    $('.slider1__controls .next').click(function(){
		$('.slider1__container').slick('slickNext');
	})
	$('.slider1__controls .prev').click(function(){
		$('.slider1__container').slick('slickPrev');
	})

Для того чтобы слайдер работал корректно, нужно следить чтобы элементы слайдера были свёрстаны ровно и по текущему канону (с использованием flex). Сначала нужно проверить, чтобы блоки корректно отображались вне слайдера а потом уже можно переносить их в слайдер.