Skip to main content

Swiper (Слайдер)

Навігація

Swiper (Слайдер)

techno4 v2.0.4 Core Component MIT License GitHub Repository CO «CF TECHNO4»

Swiper — це потужний та оптимізований сенсорний слайдер для мобільних пристроїв з апаратним прискоренням transition, підтримкою 3D ефектів (Coverflow, Cube, Flip), пагінації та зуму.

HTML-розмітка слайдера

Базова розмітка Swiper складається з головного контейнера swiper, обгортки swiper-wrapper та окремих слайдів swiper-slide:
<div class="swiper swiper-init" data-pagination='{"el": ".swiper-pagination", "clickable": true}'>
  <div class="swiper-wrapper">
    <div class="swiper-slide">Слайд 1</div>
    <div class="swiper-slide">Слайд 2</div>
    <div class="swiper-slide">Слайд 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

Ініціалізація та налаштування через JavaScript

Ви можете гнучко конфігурувати слайдер через JavaScript API:
const swiper = app.swiper.create('.swiper', {
  speed: 400,
  spaceBetween: 30,
  slidesPerView: 'auto',
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Параметри конфігурації Swiper

Тип (Default)ПараметрОпис налаштування
number (300)
speed
Тривалість анімації переходу в мілісекундах
number (0)
spaceBetween
Відстань між слайдами в пікселях
number | "auto"
slidesPerView
Кількість одночасно видимих слайдів
boolean (false)
loop
Режим безкінечного циклічного перегортання