Как пользоваться: Генератор слайдеров Splide
- Выберите параметры слайдера Splide и содержимое слайдов: демо-панели, свои URL изображений или карточки.
- Задайте количество слайдов на экране для десктопа, планшета и мобильного, отступ, эффект, зацикливание, автопрокрутку, стрелки и пагинацию.
- Проверьте живое превью при ширине десктопа, планшета и мобильного устройства.
- Скопируйте HTML, CSS и JavaScript (CDN или npm) или скачайте полную HTML-страницу.
О Splide
Splide — слайдер без зависимостей размером около 12 КБ (min + gzip), известный своей доступностью: он автоматически добавляет ARIA-роли, метки, live-регионы и поддержку клавиатуры, следуя шаблону WAI-ARIA carousel. Поддерживаются режимы loop и fade, автопрокрутка с кнопкой воспроизведения/паузы, ленивая загрузка, вертикальные слайдеры и расширения, например автопрокрутка и видео.
Параметры, которые пишет генератор
| Параметр | Значение |
|---|---|
type | slide, loop или fade (fade показывает один слайд; чтобы зациклить его, используйте rewind) |
perPage, gap | Количество слайдов на странице и отступ в виде CSS-длины |
breakpoints | Desktop-first: 1023: { perPage: 2 } применяется до 1023 px |
autoplay, interval, pauseOnHover | Автоматическое воспроизведение |
focus: 'center' | Центрирует активный слайд |
direction: 'ttb' + height | Вертикальный слайдер (требуется фиксированная высота) |
drag: 'free' | Режим свободной прокрутки с инерцией |
Стилизация Splide
Подключите splide.min.css (или базовый CSS для полного контроля), затем переопределите .splide__arrow и .splide__pagination__page.is-active — сгенерированный CSS делает это с вашим акцентным цветом.
| 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 для всех четырёх | |||
Также ищут как: splide js, splide breakpoints, splide cdn, доступная карусель.
Инструменты, которые хорошо сочетаются с Генератор слайдеров Splide
- Генератор слайдеров — Настраивайте карусель кликами, а не чтением документации: выберите библиотеку, задайте брейкпоинты, эффекты и элементы управления, смотрите живое превью и копируйте готовые HTML, CSS и JavaScript.
- Генератор слайдера Swiper — Настройте Swiper 11 в визуальном редакторе: адаптивные брейкпоинты, эффекты, автоплей, типы пагинации и многое другое.
- Генератор слайдеров Glide.js — Создайте минимальную карусель Glide.js — легкий слайдер весом около 7 КБ без зависимостей — с адаптивными брейкпоинтами, стрелками и точками, и скопируйте код.
- Проверка контраста — Введите цвет текста и фона, чтобы получить точный коэффициент контраста WCAG, результат проверки для каждого уровня, оценку APCA и исправления в один клик с сохранением оттенка.
Часто задаваемые вопросы
Почему в режиме fade Splide показывает только один слайд?
Тип fade всегда показывает один слайд на страницу. Для нескольких слайдов используйте тип slide или loop.
Брейкпоинты Splide работают через min-width или max-width?
По умолчанию через max-width (desktop-first). Укажите
mediaQuery: 'min', чтобы перейти на mobile-first.Splide доступен для людей с ограниченными возможностями?
Да — по умолчанию он применяет ARIA-атрибуты, навигацию с клавиатуры и объявления для программ чтения с экрана, и это его главное преимущество.
Можно ли установить Генератор слайдеров Splide как веб-приложение и пользоваться им офлайн?
Да. Генератор слайдеров Splide — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.