Как пользоваться: Генератор Slick Slider
- Выберите настройки слайдера Slick и содержимое слайдов: демо-панели, свои URL изображений или карточки.
- Задайте количество слайдов в ряду для десктопа, планшета и телефона, отступ, эффект, цикличность, автоплей, стрелки и пагинацию.
- Проверьте живой предпросмотр при ширине десктопа, планшета и телефона.
- Скопируйте HTML, CSS и JavaScript (CDN или npm) или скачайте готовую HTML-страницу целиком.
О Slick
Slick («последняя карусель, которая вам понадобится») долгие годы был стандартной каруселью на jQuery и до сих пор встроен во многие темы WordPress, магазины Shopify и старые сайты. Он поддерживает адаптивные брейкпоинты, центрирование, fade, вертикальную прокрутку, ленивую загрузку и автоплей. Последний релиз (1.8.1) вышел в 2017 году, и для работы требуется jQuery.
Опции Slick
| Опция | Значение |
|---|---|
slidesToShow / slidesToScroll | Количество видимых слайдов и число слайдов, которые сдвигаются за один клик |
responsive | Массив { breakpoint, settings }; каждая настройка применяется при ширине меньше брейкпоинта |
infinite | Зацикливание слайдов |
autoplay, autoplaySpeed | Автоматическое переключение и задержка между слайдами |
fade | Плавная смена (по одному слайду за раз) |
centerMode | Центрирует активный слайд с частично видимыми соседями |
Отступы между слайдами
В Slick нет опции отступа. Сгенерированный CSS добавляет горизонтальный margin для .slick-slide и отрицательный margin для .slick-list, чтобы внешние края оставались ровными.
Стоит ли использовать Slick сейчас?
Если на существующем сайте уже подключены jQuery и Slick, сохранять единообразие разумно. Для нового проекта Swiper или Splide компактнее, поддерживаются, лучше доступны и не требуют jQuery. Переключите библиотеку выше, и генератор пересчитает ваши настройки.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Размер (min + gzip, JS) | ~40 КБ (бандл) | ~12 КБ | ~7 КБ | ~12 КБ + jQuery ~30 КБ |
| Зависимости | Нет | Нет | Нет | jQuery |
| Эффекты | Сдвиг, fade, куб, coverflow, флип, карточки, creative | Сдвиг, fade | Сдвиг | Сдвиг, fade |
| Вертикальный режим | Да | Да | Нет | Да |
| Доступность | Хорошая (модуль a11y) | Отличная (ARIA по умолчанию) | Базовая | Базовая |
| Поддержка | Да | Да | Медленно | Нет (последний релиз 2017) |
| Лицензия | MIT для всех четырёх | |||
Также ищут как: slick carousel, автоплей slick, jquery карусель, slick cdn, генератор карусели slick.
Инструменты, которые хорошо сочетаются с Генератор Slick Slider
- Генератор слайдеров — Настраивайте карусель кликами, а не чтением документации: выберите библиотеку, задайте брейкпоинты, эффекты и элементы управления, смотрите живое превью и копируйте готовые HTML, CSS и JavaScript.
- Генератор слайдера Swiper — Настройте Swiper 11 в визуальном редакторе: адаптивные брейкпоинты, эффекты, автоплей, типы пагинации и многое другое.
- Генератор слайдеров Splide — Постройте доступную и лёгкую карусель Splide без чтения документации: задайте параметры, проверьте превью на трёх размерах экрана и скопируйте код.
- HTML-редактор онлайн — Легкая песочница для кода: редактируйте HTML, CSS и JavaScript рядом, сразу видите результат, читайте вывод консоли и скачивайте страницу одним HTML-файлом.
Часто задаваемые вопросы
Нужен ли Slick для работы jQuery?
Как добавить отступ между слайдами Slick?
.slick-slide и такой же отрицательный margin для .slick-list. Генератор формирует это на основе значения отступа.