Swiper предоставляет более 100 опций для конфигурации. Вот полный список основных и продвинутых параметров, которые можно передать при инициализации.
Основные настройки слайдов
| Опция | Описание |
|---|
slidesPerView | Количество видимых слайдов одновременно. Может быть число (1, 2, 3…) или строка 'auto' |
spaceBetween | Расстояние между слайдами в px |
initialSlide | Индекс начального слайда (по умолчанию 0) |
speed | Длительность анимации перехода между слайдами в ms (по умолчанию 300) |
direction | Направление слайдера: 'horizontal' или 'vertical' |
loop | Включить бесконечный цикл: true или false |
loopAddBlankSlides | Автоматически добавлять пустые слайды при использовании loop с grid или slidesPerGroup |
loopedSlides | Количество слайдов, которые будут дублированы в loop режиме |
loopPreventsSliding | Если true, то slideNext/Prev не будут работать во время анимации в loop режиме |
Автоматическое воспроизведение
| Опция | Описание |
|---|
autoplay | Включить автоматическое воспроизведение или объект с параметрами: { delay: 5000, disableOnInteraction: true } |
autoplay.delay | Задержка между сменой слайдов в ms (по умолчанию 5000) |
autoplay.disableOnInteraction | Отключить автовоспроизведение при взаимодействии пользователя |
autoplay.stopOnLastSlide | Остановить автоплей на последнем слайде |
autoplay.reverseDirection | Воспроизведение в обратном направлении |
autoplay.pauseOnMouseEnter | Паузировать при наведении мыши |
Свайп и сенсорные события
| Опция | Описание |
|---|
simulateTouch | Если true, мышь работает как сенсорное устройство (true по умолчанию) |
touchRatio | Коэффициент чувствительности к сенсорным событиям (по умолчанию 1) |
touchAngle | Допустимый угол для срабатывания свайпа в градусах (по умолчанию 45) |
touchStartPreventDefault | Предотвращать стандартное действие при начале касания |
touchStartForce | Всегда предотвращать стандартное действие для touchstart/pointerdown |
touchMoveStopPropagation | Остановить распространение события touchmove |
touchEventsTarget | Где слушать события: 'container' или 'wrapper' |
allowTouchMove | Разрешить перемещение слайдов свайпом |
noSwiping | Отключить свайп на элементах с классом noSwipingClass |
noSwipingClass | CSS класс для отключения свайпа |
noSwipingSelector | CSS селектор элементов, на которых отключен свайп (например, 'input') |
shortSwipes | Разрешить короткие свайпы |
longSwipes | Разрешить длинные свайпы |
longSwipesRatio | Коэффициент для определения длинного свайпа |
longSwipesMomentum | Длинные свайпы срабатывают при отпускании |
threshold | Минимальное расстояние для срабатывания свайпа в px |
touchReleaseOnEdges | Отпустить сенсорное событие на краях для дальнейшей прокрутки страницы |
Клавиатура и мышь
| Опция | Описание |
|---|
keyboard | Включить навигацию с помощью клавиатуры или объект с параметрами |
mousewheel | Включить навигацию с помощью колесика мыши или объект с параметрами |
grabCursor | Показать курсор «grab» при наведении на слайдер |
Эффекты переходов
| Опция | Описание |
|---|
effect | Тип эффекта: 'slide', 'fade', 'cube', 'coverflow', 'flip', 'creative' или 'cards' |
fadeEffect | Объект с параметрами для fade эффекта |
cubeEffect | Объект с параметрами для cube эффекта |
coverflowEffect | Объект с параметрами для coverflow эффекта |
flipEffect | Объект с параметрами для flip эффекта |
creativeEffect | Объект с параметрами для creative эффекта |
cardsEffect | Объект с параметрами для cards эффекта |
CSS классы
| Опция | Описание |
|---|
slideClass | CSS класс для слайда (по умолчанию 'swiper-slide') |
wrapperClass | CSS класс для обертки слайдов (по умолчанию 'swiper-wrapper') |
activeClass | CSS класс активного слайда (по умолчанию 'swiper-slide-active') |
visibleClass | CSS класс видимого слайда (по умолчанию 'swiper-slide-visible') |
prevClass | CSS класс для слайда перед активным (по умолчанию 'swiper-slide-prev') |
nextClass | CSS класс для слайда после активного (по умолчанию 'swiper-slide-next') |
fullyVisibleClass | CSS класс полностью видимого слайда |
blankSlideClass | CSS класс для пустого слайда в loop режиме |
slidesPerGroupClass | Префикс для класса группирования слайдов |
Прокрутка и управление движением
| Опция | Описание |
|---|
freeMode | Включить свободный режим скольжения или объект с параметрами |
freeMode.enabled | Включить свободный режим |
freeMode.momentum | Включить момент (инерцию) в свободном режиме |
freeMode.momentumRatio | Коэффициент момента |
freeMode.momentumBounce | Включить отскок в конце |
freeMode.momentumBounceRatio | Коэффициент отскока |
freeMode.momentumVelocityRatio | Коэффициент скорости |
freeMode.sticky | Липкий режим — слайд прилипает к ближайшей позиции |
resistanceRatio | Коэффициент сопротивления при выходе за границы |
resistance | Если false, отключить сопротивление границам |
Группирование слайдов
| Опция | Описание |
|---|
slidesPerGroup | Количество слайдов для группирования при переводе |
slidesPerGroupSkip | Количество первых слайдов, которые считаются отдельной группой |
Центрирование
| Опция | Описание |
|---|
centeredSlides | Центрировать активный слайд |
centeredSlidesBounds | Центрировать без добавления пропусков в начале и конце (требует centeredSlides: true) |
centerInsufficientSlides | Центрировать слайды, если их меньше чем slidesPerView |
Навигация и пагинация
| Опция | Описание |
|---|
navigation | Включить стрелки навигации или объект с параметрами: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } |
pagination | Включить пагинацию или объект с параметрами: { el: '.swiper-pagination', type: 'bullets' } |
pagination.type | Тип пагинации: 'bullets', 'fraction', 'progressbar' или 'custom' |
pagination.dynamicBullets | Динамические буллеты |
pagination.dynamicMainBullets | Количество видимых буллетов |
pagination.hideOnClick | Скрыть пагинацию при клике |
pagination.clickable | Пагинация кликабельна |
pagination.renderBullet | Функция для рендеринга буллета |
pagination.renderFraction | Функция для рендеринга дроби |
pagination.renderProgressbar | Функция для рендеринга прогрессбара |
scrollbar | Включить скроллбар или объект с параметрами |
Адаптивность
| Опция | Описание |
|---|
breakpoints | Объект с брейкпоинтами и параметрами для разных размеров экрана |
breakpointsBase | База для брейкпоинтов: 'window' (по умолчанию) или 'container' |
observer | Следить за изменением размера окна (true по умолчанию) |
observeParents | Следить за изменением родительских элементов |
observeSlideChildren | Следить за изменением дочерних элементов слайдов |
resizeObserver | Использовать ResizeObserver для отслеживания размера контейнера |
autoHeight | Адаптировать высоту слайдера к высоте активного слайда |
Сетка (многорядный слайдер)
| Опция | Описание |
|---|
grid | Объект с параметрами сетки: { rows: 2, fill: 'row' } |
grid.rows | Количество рядов |
grid.fill | Как заполнять ряды: 'row' или 'column' |
История и хеширование
| Опция | Описание |
|---|
history | Включить history push state или объект с параметрами |
history.enabled | Включить историю |
history.replaceState | Заменять вместо добавления |
hashNavigation | Включить хеш-навигацию или объект с параметрами |
hashNavigation.watchState | Следить за изменением хеша |
Прочие опции
| Опция | Описание |
|---|
enabled | Включен ли слайдер изначально |
disabled | Отключен ли слайдер изначально |
preventClicks | Предотвращать нежелательные клики при свайпе |
preventClicksPropagation | Остановить распространение клика при свайпе |
preventInteractionOnTransition | Запретить взаимодействие во время переходов |
width | Ширина слайдера в px (для SSR и тестов) |
height | Высота слайдера в px (для SSR и тестов) |
containerModifierClass | Префикс для модификаторов контейнера |
watchOverflow | Отключить слайдер если слайдов недостаточно |
touchStartPreventDefault | Предотвращать стандартное действие при touchstart |
onlyExternal | Управлять слайдером только через API |
runCallbacksOnInit | Запускать события при инициализации |
normalizeSlideIndex | Нормализовать индекс слайда |
allowTouchMove | Разрешить движение свайпом |
allowSlidePrev | Разрешить перемещение к предыдущему слайду |
allowSlideNext | Разрешить перемещение к следующему слайду |
swipeHandler | Селектор или элемент для обработки свайпов |
modules | Массив модулей Swiper для использования |
init | Инициализировать слайдер сразу после создания |
passiveListeners | Использовать passive event listeners |
emit | Объект обработчиков событий |
Пример использования
JavaScriptconst swiper = new Swiper('.swiper', {
// Основные настройки
slidesPerView: 3,
spaceBetween: 30,
speed: 500,
direction: 'horizontal',
loop: true,
initialSlide: 0,
// Автоматическое воспроизведение
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
// Эффект
effect: 'slide',
// Навигация
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// Пагинация
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
// Клавиатура и мышь
keyboard: true,
mousewheel: true,
// Адаптивность
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
// События
on: {
init: function() {
console.log('Swiper инициализирован');
},
slideChange: function() {
console.log('Слайд изменился');
},
}
});
