frontend от ежетты: “Привет! Разберем, как с помощью библиотеки swiper создать слайдер на с…”

Привет! Разберем, как с помощью библиотеки swiper создать слайдер на странице с нужными параметрами

✅ HTML слайдера

<div class="slider">

<div class="swiper">
    
    <div class="swiper-slide">
       <!— Слайд 1 !—>
    </div>
    <div class="swiper-slide">
      <!— Слайд 2 !—>
    </div>
    <div class="swiper-slide">
      <!— Слайд 3 !—>
    </div>
</div>

<button class="slider__btn-prev">
    <span class="slider__btn-icon"></span>
</button>
<button class="slider__btn-next">
    <span class="slider__btn-icon"></span>
</button>

<div class="swiper-pagination"></div>
</div>

✅ Подключение Swiper стили и js
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js" type="text/javascript"></script>

Можно установить в проект
npm i swiper | yarn add swiper

✅ Создание объекта swiper
const swiper = new Swiper(<элемент либо селектор основного контейнера>, {
/* число, слайдов, отображаемых одновременно */
slidesPerView: 1.2,
/* ориентация горизонтальный
или вертикальный слайдер */
direction: 'horizontal',
/* отступ между соседними слайдами */
spaceBetween: 20,
// активный слайд в центре, а не слева
centeredSlides: true,
// включить параллакс
parallax: true,
// 3D-слайдер
effect: 'cube',
cubeEffect: {
      // тень у слайдов
      slideShadows: true,
},
/* автопроигрывание слайдов */
autoplay: {
    // время проигрывания слайда
    delay: 2500,
   /* можно ли переключать слайды
   во время автопроигрывания */
    disableOnInteraction: false,
},
/* можно отображать, сколько
   всего слайдов и сколько показано */
pagination {
    // элемент или селектор пагинации
    el: 'swiper-pagination',
    /* тип пагинации: 'bullets' - точки,
    'fraction' - числа например, 2/5,
    'progressbar' - линия с частичным
     заполнением, 'custom' - можно
     стилизовать как хочешь */
    type: 'bullets',
    /* нажатие на элементы пагинации
    для переключения */
    clickable: true,
},
/* элементы, либо селекторы
   кнопок навигации */
navigation: {
     nextEl: 'slider__btn-next',
     prevEl: 'slider__btn-prev',
},
/* точки изменения параметров
    аналог min-width: <значение> */
breakpoints: {
     768: {
              slidesPerView: 2,
              spaceBetween: 16,
     }
}
})

✅ Создали объект, а теперь используем его
// инициализация слайдера на странице
swiper.init();

/* запущенный слайдер может слушать события,
например, переключение слайдов */
swiper.on('slideChange', <функция>);

/* autoplay можно останавливать и включать снова */
swiper.autoplay.stop();
swiper.autoplay.start();

Это только малая часть настроек swiper,
🔗 ссылка на документацию
📹 видео со сборкой swiper

#js #swiper