@vblog@vbloghttps://teletype.in/atom/vblog2026-09-21T05:47:57.710Zvblog:WSCQqQI6USlick Slider: Рецепты, конфиг2021-04-28T16:05:33.169Z2021-04-28T16:05:56.214ZПодключение слайдера (типичный конфиг с респонзитивностью):
<p>Подключение слайдера (типичный конфиг с респонзитивностью):</p>
<pre>$('.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');
})</pre>
<p>Для того чтобы слайдер работал корректно, нужно следить чтобы элементы слайдера были свёрстаны ровно и по текущему канону (с использованием flex). Сначала нужно проверить, чтобы блоки корректно отображались вне слайдера а потом уже можно переносить их в слайдер.</p>