Как пользоваться: Генератор слайдеров
- Выберите библиотеку — Swiper, Splide, Glide.js или Slick — и содержимое слайдов: демо-панели, свои URL изображений или карточки.
- Задайте количество слайдов на экране для десктопа, планшета и мобильных устройств, отступ, эффект, цикл, автопрокрутку, стрелки и пагинацию.
- Проверьте живое превью в ширине десктопа, планшета и мобильного устройства.
- Скопируйте HTML, CSS и JavaScript (CDN или npm) или скачайте полную HTML-страницу.
Создавайте слайдеры без запоминания опций
У каждой библиотеки каруселей десятки опций с разными названиями: slidesPerView у Swiper — это perPage у Splide, perView у Glide и slidesToShow у Slick. Этот генератор даёт один набор настроек и пишет корректную конфигурацию для выбранной библиотеки, включая адаптивные брейкпоинты, которые в каждой библиотеке устроены по-своему (Swiper использует подход mobile-first с min-width, Splide и Glide — desktop-first с max-width, а Slick — массив responsive).
Какую библиотеку слайдера выбрать?
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Размер (min + gzip, JS) | ~40 KB (бандл) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Зависимости | Нет | Нет | Нет | jQuery |
| Эффекты | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Вертикальный режим | Да | Да | Нет | Да |
| Доступность | Хорошая (модуль a11y) | Отличная (ARIA по умолчанию) | Базовая | Базовая |
| Поддержка | Да | Да | Медленная | Нет (последний релиз в 2017) |
| Лицензия | MIT для всех четырёх | |||
Swiper — самый популярный и самый функциональный вариант, используйте его, если не нужно что-то совсем лёгкое. Splide легче и из коробки имеет лучшую доступность. Glide.js — самая компактная библиотека для простых каруселей. Slick всё ещё встречается на старых сайтах и в темах WordPress, но он зависит от jQuery и больше не поддерживается, поэтому выбирайте его только для совместимости с существующим проектом.
Советы по производительности и доступности
- Включайте ленивую загрузку для изображений, которые не видны на первом слайде (атрибут
loading="lazy"добавляется автоматически), и задавайте им размер по ширине слайда — помогут ресайзер изображений и компрессор. - Не используйте автопрокрутку для важного контента; если всё же используете, оставьте паузу при наведении включённой и задержку не меньше 4 секунд.
- Оставляйте стрелки и пагинацию включёнными, чтобы пользователи клавиатуры и программ чтения с экрана могли навигировать.
- Карусели на первом экране могут ухудшать Largest Contentful Paint — если первое изображение является вашим LCP-элементом, убедитесь, что оно не загружается лениво.
Руководства по конкретным библиотекам: Swiper, Splide, Glide.js и Slick. Для Webflow вставьте HTML в элемент Embed, а скрипт — перед </body>.
Также ищут как: html слайдер, javascript карусель.
Инструменты, которые хорошо сочетаются с Генератор слайдеров
- HTML-редактор онлайн — Легкая песочница для кода: редактируйте HTML, CSS и JavaScript рядом, сразу видите результат, читайте вывод консоли и скачивайте страницу одним HTML-файлом.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
Часто задаваемые вопросы
Какая библиотека слайдера лучше?
Можно ли использовать код в WordPress или Webflow?
</body>.