Слайдер SWIPER

Современные сайты не обходятся без слайдеров. Для их реализации нам поможет слайдер SWIPER, который написан на чистом js, поэтому нам не придется использовать jquery.

Для начала нужно подключить swiper. Можно это сделать командой в терминале:

 $ npm install swiper

или подключить с помощью <link> и <script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

2. Далее добавить HTML разметку

<!-- Slider main container -->
<div class="swiper">
  <!-- wrapper -->
  <div class="swiper-wrapper">
    <!-- Слайды -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- Если нужна пагинацаия -->
  <div class="swiper-pagination"></div>

  <!-- Если нужны кнопки навигации влево и вправо -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Если нужен скроллбар -->
  <div class="swiper-scrollbar"></div>
</div>

Чтобы не использовать все стили слайдера, можно подключить только самые необходимые: ссылка на код

3. Далее нужно инициализировать слайдер в js файле.

import Swiper, { Navigation, Pagination } from 'swiper';

const swiper = new Swiper('.swiper', {
  modules: [Navigation, Pagination],
...
});

Если нам нужны какие-то функции, то импортируем их из "swiper", и подключаем в modules.

У слайдера много модулей, событий и параметров, поэтому он позволяет решать очень много задач разных сложностей.

Основные функции:

Navigation. Добавляет стрелки для переключения слайдов влево вправо.
Pagination. Добавляет кружки или цифры с количеством слайдов.
Scrollbar. Добавляет скроллбар
Autoplay. Автоматически меняет слайды с разным интервалом времени.
Parallax. Добавляет parallax эффект.
Fade Effect, Coverflow Effect, Flip Effect, Cube Effect, Cards Effect, Creative Effect. Различные эффекты на смену слайдов.
Thumbs. Тамбнэйлы - маленькие превью слайдов.
Keyboard Control. Добавляет смену слайдов с помощью клавиатуры.
Mousewheel Control. Добавляет смену слайдов с помощью мышки.

Официальная документация swiper: https://swiperjs.com/swiper-api

Примеры слайдеров и функций: https://swiperjs.com/demos

Слайдер SWIPER

Report Page