Коротко — обычно проблема в одном из трёх мест: неверные подключение/инициализация Slick (или порядок скриптов), синтаксическая ошибка в конфиге JS (незакрытые фигурные/круглые скобки, неверный тип для slidesToShow) или в CSS (картинки имеют фиксированные width/height и не растягиваются внутри слайдов). Ниже — чек‑лист и рабочий минимальный пример, который можно подставить и проверить.
1) Проверки (часто встречающиеся ошибки)
- Убедитесь, что подключили jQuery до slick.min.js.
- Подключили CSS slick.css и slick-theme.css.
- Инициализируете слайдер после того, как DOM готов (например $(document).ready или $(function(){ ... })).
- Нет JavaScript‑ошибок в консоли (они прерывают исполнение и Slick не запустится).
- slidesToShow указывайте как число, например slidesToShow: 3 (не строкой "3").
- Закройте все скобки/фигурные скобки/скобки вызова .slick(...); — синтаксическая ошибка остановит скрипт.
- Если слайдер находится в скрытом элементе (вкладка, аккордеон), Slick может неправильно посчитать ширину — тогда инициализируйте при показе или вызовите .slick('setPosition').
2) Как заставить картинки масштабироваться (responsive)
Добавьте правило:
.slider img {
width: 100%;
height: auto;
display: block;
}
Это убирает фиксированные атрибуты ширины/высоты и заставляет картинку занимать ширину слайда.
3) Рабочий минимальный пример
HTML:
<head>
<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">
</head>
<body>
<div class="slider">
<div><img src="img1.jpg" alt=""></div>
<div><img src="img2.jpg" alt=""></div>
<div><img src="img3.jpg" alt=""></div>
<div><img src="img4.jpg" alt=""></div>
</div>
<script src="jquery.min.js"></script>
<script src="slick.min.js"></script>
<style>
.slider img { width:100%; height:auto; display:block; }
</style>
<script>
$(function(){
$('.slider').slick({
slidesToShow: 3, // число слайдов на экран (обязательно число)
slidesToScroll: 1,
infinite: true,
dots: true,
arrows: true,
responsive: [
{ breakpoint: 768, settings: { slidesToShow: 2 } },
{ breakpoint: 480, settings: { slidesToShow: 1 } }
]
});
});
</script>
</body>
4) Дополнительные советы
- Если хотите фиксированную высоту с обрезкой — используйте фиксированную высоту и object-fit: .slider img { width:100%; height:200px; object-fit:cover; }.
- Если slidesToShow > общего числа слайдов и infinite:true, Slick будет клонировать слайды — это нормально.
- Посмотрите консоль браузера — если скрипт не выполняется, там будет причина.
Если хотите, пришлите ваш конкретный HTML/CSS/JS (или ошибку из консоли) — посмотрю и укажу точные правки.