Как пользоваться: Генератор слайдера Swiper
- Выберите настройки слайдера и содержимое слайдов: демо-панели, свои URL изображений или карточки.
- Задайте количество слайдов для десктопа, планшета и телефона, отступ, эффект, loop, автоплей, стрелки и пагинацию.
- Проверьте живое превью при ширине десктопа, планшета и телефона.
- Скопируйте HTML, CSS и JavaScript (CDN или npm) или скачайте полную HTML-страницу.
О Swiper
Swiper — самый популярный сенсорный слайдер в вебе: без зависимости от фреймворков, с аппаратным ускорением и богатым набором модулей — навигация, пагинация, автоплей, управление с клавиатуры, колесо мыши, свободный режим, ленивая загрузка, доступность и семь эффектов перехода. Версия 11 поставляется одним бандлом для CDN или как ES-модули из npm.
Ключевые опции, которые пишет этот генератор
| Опция | Что делает |
|---|---|
slidesPerView + breakpoints | Количество слайдов, видимых одновременно; брейкпоинты работают по принципу mobile-first (768: { slidesPerView: 2 } применяется от 768 px и шире) |
spaceBetween | Отступ между слайдами в px |
loop | Бесконечная прокрутка; для плавного loop в Swiper 11 нужно минимум slidesPerView × 2 слайдов |
autoplay | delay, pauseOnMouseEnter и disableOnInteraction: false, чтобы автоплей возобновлялся после свайпа |
effect | fade (с crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction или progressbar |
Стилизация
Swiper читает CSS-переменную --swiper-theme-color для стрелок и активных точек; выбранный акцентный цвет записывается именно туда. Другие переменные включают --swiper-navigation-size и --swiper-pagination-bullet-size.
Использование npm и фреймворков
Переключите способ установки на npm, чтобы получить import Swiper from 'swiper/bundle'. В React, Vue или Svelte можно использовать Swiper Element (веб-компоненты) или официальные React-компоненты с теми же опциями в виде props.
| 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 js, swiper cdn, swiper coverflow.
Инструменты, которые хорошо сочетаются с Генератор слайдера Swiper
- Генератор слайдеров — Настраивайте карусель кликами, а не чтением документации: выберите библиотеку, задайте брейкпоинты, эффекты и элементы управления, смотрите живое превью и копируйте готовые HTML, CSS и JavaScript.
- Генератор слайдеров Splide — Постройте доступную и лёгкую карусель Splide без чтения документации: задайте параметры, проверьте превью на трёх размерах экрана и скопируйте код.
- Генератор слайдеров Glide.js — Создайте минимальную карусель Glide.js — легкий слайдер весом около 7 КБ без зависимостей — с адаптивными брейкпоинтами, стрелками и точками, и скопируйте код.
- Изменить размер изображения — Измените размер фото до точных размеров в пикселях или процентах, обрежьте его под формат соцсети или впишите в рамку с цветом фона.
Часто задаваемые вопросы
Почему не работает loop в Swiper?
В Swiper 11 для loop нужно достаточно слайдов: минимум вдвое больше, чем слайдов на экране. Добавьте слайды или уменьшите slidesPerView.
Как работают брейкпоинты Swiper?
Они работают по принципу mobile-first: базовые опции применяются к маленьким экранам, а каждый ключ брейкпоинта (в px) применяется от этой ширины и выше.
Как поменять цвет стрелок?
Задайте
--swiper-theme-color для слайдера (это делает акцентный цвет), либо стилизуйте .swiper-button-next и .swiper-button-prev.Swiper бесплатный?
Да, Swiper распространяется по лицензии MIT и бесплатен для коммерческих проектов.
Можно ли установить Генератор слайдера Swiper как веб-приложение и пользоваться им офлайн?
Да. Генератор слайдера Swiper — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.