Как пользоваться: Генератор слайдеров Glide.js
- Выберите настройки слайдера Glide.js и содержимое слайдов: демо-панели, свои URL изображений или карточки.
- Задайте количество слайдов на экране для десктопа, планшета и телефона, отступ, эффект, зацикливание, автопрокрутку, стрелки и пагинацию.
- Проверьте живой предпросмотр при ширине десктопа, планшета и телефона.
- Скопируйте HTML, CSS и JavaScript (CDN или npm) или скачайте готовую HTML-страницу целиком.
О Glide.js
Glide.js — крошечный (около 7 КБ min + gzip) ES6-слайдер без зависимостей, построенный на CSS-трансформациях. Он сосредоточен на главном — perView, отступах, брейкпоинтах, автопрокрутке, свайпе и клавиатуре — а разметку и стили оставляет на ваше усмотрение. Он идеально подходит, когда важнее вес страницы, чем эффекты.
Терминология Glide
| Опция | Значение |
|---|---|
type: 'carousel' | Бесконечная прокрутка (клонирует слайды) |
type: 'slider' | Останавливается на первом и последнем слайде |
perView, gap | Количество видимых слайдов и отступ в px |
focusAt: 'center' | Центрирует активный слайд |
breakpoints | Брейкпоинты по max-width: 767: { perView: 1 } |
data-glide-el="controls" | Метки разметки для стрелок (data-glide-dir="<") и точек (controls[nav]) |
Чего не умеет Glide
В Glide нет эффектов затухания, вертикального режима и 3D, а возможности доступности базовые — добавьте aria-label к элементам управления (сгенерированная разметка их уже включает). Если нужны эти функции, переключите генератор на Swiper или Splide: ваши настройки перенесутся.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Размер (min + gzip, JS) | ~40 КБ (бандл) | ~12 КБ | ~7 КБ | ~12 КБ + jQuery ~30 КБ |
| Зависимости | Нет | Нет | Нет | jQuery |
| Эффекты | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Вертикальный режим | Да | Да | Нет | Да |
| Доступность | Хорошая (модуль a11y) | Отличная (ARIA по умолчанию) | Базовая | Базовая |
| Поддержка | Да | Да | Медленно | Нет (последний релиз в 2017) |
| Лицензия | MIT для всех четырех | |||
Также ищут как: glidejs карусель, легкая карусель js, glide breakpoints, генератор карусели js.
Инструменты, которые хорошо сочетаются с Генератор слайдеров Glide.js
- Генератор слайдеров — Настраивайте карусель кликами, а не чтением документации: выберите библиотеку, задайте брейкпоинты, эффекты и элементы управления, смотрите живое превью и копируйте готовые HTML, CSS и JavaScript.
- Генератор слайдера Swiper — Настройте Swiper 11 в визуальном редакторе: адаптивные брейкпоинты, эффекты, автоплей, типы пагинации и многое другое.
- Генератор слайдеров Splide — Постройте доступную и лёгкую карусель Splide без чтения документации: задайте параметры, проверьте превью на трёх размерах экрана и скопируйте код.
- Минификатор JavaScript — Вставьте JavaScript и получите готовый к продакшену минифицированный код от Terser — того же движка, что используют Vite, webpack и Rollup, — с наглядным сравнением до и после и размерами в gzip.
Часто задаваемые вопросы
Поддерживает ли Glide.js эффект затухания или вертикальные слайдеры?
Нет. Glide умеет только горизонтальный сдвиг. Для эффектов fade, вертикального режима или 3D используйте Swiper или Splide.
Почему не работают точки в Glide?
Контейнеру точек нужен атрибут
data-glide-el="controls[nav]" и по одной кнопке на слайд с data-glide-dir="=index" — сгенерированный HTML включает оба.Поддерживается ли Glide.js?
Библиотека стабильна и по-прежнему широко используется, хотя релизы выходят нечасто. У неё нет зависимостей, поэтому она продолжает работать.
Можно ли установить Генератор слайдеров Glide.js как веб-приложение и пользоваться им офлайн?
Да. Генератор слайдеров Glide.js — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.