Swiper

npm docs github

Актуальная версия на момент написания 11.1.15

npm i swiper

Особенности работы с TS

Работает из коробки

Пример использования

HTML

<div class="swiper js-main-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img
        src="https://picsum.photos/id/237/600/400"
        width="600"
        height="400"
        loading="lazy"
        alt="Puppy"
      />
    </div>

    <div class="swiper-slide">
      <img
        src="https://picsum.photos/id/238/600/400"
        width="600"
        height="400"
        loading="lazy"
        alt="Building"
      />
    </div>

    <div class="swiper-slide">
      <img
        src="https://picsum.photos/id/239/600/400"
        width="600"
        height="400"
        loading="lazy"
        alt="Dandelion"
      />
    </div>
  </div>

  <button class="swiper-button-prev">Prev</button>
  <button class="swiper-button-next">Next</button>
</div>

Подключение ts

import Swiper from "swiper";
import { Navigation } from "swiper/modules";

const sliders = document.querySelectorAll<HTMLElement>(".js-main-slider");
for (const slider of sliders) {
  // eslint-disable-next-line no-new
  new Swiper(slider, {
    // configure Swiper to use modules
    modules: [Navigation],
    navigation: {
      nextEl: slider.querySelector<HTMLElement>(".swiper-button-next"),
      prevEl: slider.querySelector<HTMLElement>(".swiper-button-prev"),
    },
  });
}

Подключение стилей

// import Swiper and modules styles
@import "swiper/css";
@import "swiper/css/navigation";
@import "swiper/css/pagination";

Особенности

Дополнительные модули

Для использования дополнительных модулей (например, пагинация, ленивая загрузка, thumbs), необходимо внести изменения в ts, а так же подключить соответствующие стили, например для пагинации:

import Swiper from "swiper";
import { Navigation, Pagination } from "swiper/modules";

new Swiper(slider, {
  modules: [Navigation, Pagination],
});

Особенности работы внутри flex и grid контейнеров

Swiper может раздвигать контейнер внутри которого находится. Чтобы избежать подобного поведения необходимо добавлять стили для свайпера и для контейнера.

Flex-container:

.flex-container {
  display: flex;
}
.flex-container .swiper {
  flex-grow: 1; // Swiper занимает все свободное пространство
  flex-basis: 0; // Swiper не претендует на пространство других
}

Grid-container:

.grid-container {
  display: grid;
  grid-template-columns: /*...*/ 1fr /*...*/; // swiper занимает все свободное пространство
}
.grid-container .swiper {
  max-width: 100%;
}

Стрелки выходящие за края слайдера

Порой стоит задача сделать навигацию, выходящую за границы слайдера:

Для этого кнопки навигации должны лежать за пределами блока .swiper.

Приблизительный код будет следующим:

HTML

<div class="js-slider">
  <div class="swiper js-slider__swiper">
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <img
          src="https://picsum.photos/id/237/600/400"
          width="600"
          height="400"
          loading="lazy"
          alt="Puppy"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="https://picsum.photos/id/238/600/400"
          width="600"
          height="400"
          loading="lazy"
          alt="Building"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="https://picsum.photos/id/239/600/400"
          width="600"
          height="400"
          loading="lazy"
          alt="Dandelion"
        />
      </div>
    </div>
  </div>
  <button class="js-slider__prev">Prev</button>
  <button class="js-slider__next">Next</button>
</div>

TS

for (const slider of document.querySelectorAll(".js-slider")) {
  const swiper = slider.querySelector<HTMLElement>(".js-slider__swiper");
  if (swiper) {
    // eslint-disable-next-line no-new
    new Swiper(swiper, {
      navigation: {
        nextEl: slider.querySelector<HTMLElement>(".js-slider__next"),
        prevEl: slider.querySelector<HTMLElement>(".js-slider__prev"),
      },
    });
  }
}