Статьи
Swiper.js — слайдер для сайта: настройки и примеры

Swiper.js — как подключить и настроить слайдер на сайте

Дмитрий Белов

Обновлено 27 мая 2026

412 просмотров

Swiper.js — самая популярная библиотека для слайдеров на текущий момент. Swiper слайдер работает на любом устройстве, поддерживает тач-жесты, а настройки swiper позволяют сделать всё: от простой карусели до эффекта coverflow. В этой статье разберём подключение, разметку и живые примеры: от базового до продвинутого. Заодно покажем, как использовать swiper в React и Vue.

Swiper.js — настройка слайдера на чистом JavaScript

Что такое Swiper.js

Swiper.js — это JavaScript-библиотека для создания слайдеров и каруселей. Бесплатная, с открытым кодом, весит около 140 КБ (с CSS). Если вы когда-нибудь листали фотографии на телефоне и думали «вот бы такое на сайте» — это оно.

Что умеет Swiper:

Тач-жесты: листается пальцем на мобильных
Swiper autoplay: автоматическая прокрутка
Swiper pagination: точки, прогрессбар, числа
Несколько слайдов в ряд и адаптивность через breakpoints
Эффекты: fade, cube, coverflow, flip, cards
Готовые компоненты для Vue, React и Angular
TypeScript: полная типизация из коробки

Как подключить Swiper.js

Два способа подключения:

Через CDN (самый простой). Добавьте в HTML:

<!-- CSS в <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- JS перед </body> -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

Через npm (для проектов со сборщиком):

# Устанавливает Swiper как npm-пакет
npm install swiper

import Swiper from 'swiper';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

HTML-разметка Swiper

Структура одинакова для всех вариантов. Обёртка с классом swiper , внутри — swiper-wrapper со слайдами. Пагинация и кнопки рядом с обёрткой:

<div class="swiper my-slider">
    <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 class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

Пример 1: базовый слайдер с автопрокруткой

Самый простой вариант: слайдер с навигацией, точками и автопрокруткой. Именно с него стоит начинать:

const swiper1 = new Swiper('.swiper-art-1', {
    loop: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.swiper-art-1 .swiper-pagination',
        clickable: true,
    },
    navigation: {
        prevEl: '.swiper-art-1 .swiper-button-prev',
        nextEl: '.swiper-art-1 .swiper-button-next',
    },
});

Swiper autoplay — как настроить

autoplay — объект с несколькими параметрами:

delay — задержка в миллисекундах между слайдами. 3000 = 3 секунды.
disableOnInteraction — если false , автопрокрутка возобновляется после того, как пользователь полистал вручную. Если true — останавливается навсегда.
pauseOnMouseEnter — ставит на паузу, когда курсор над слайдером. Полезно, если на слайдах есть текст.
reverseDirection — крутит в обратную сторону. Зачем? Не знаем, но кто-то просил.

Пример 2: прогрессбар вместо точек

Вместо точек можно показать прогресс-полоску, которая нагляднее показывает, сколько осталось до следующего слайда:

const swiper2 = new Swiper('.swiper-art-2', {
    loop: true,
    autoplay: { delay: 2500, disableOnInteraction: false },
    pagination: {
        el: '.swiper-art-2 .swiper-pagination',
        type: 'progressbar',
    },
});

Несколько слайдов в ряд и адаптивность

Одна из главных сил Swiper — параметр slidesPerView . Ставите число, и вместо одного слайда показываются несколько. Плюс breakpoints для адаптивности: на телефоне 1, на планшете 2, на десктопе 3.

Пример 3: карусель с breakpoints

const swiper3 = new Swiper('.swiper-art-3', {
    slidesPerView: 1,
    spaceBetween: 16,
    pagination: {
        el: '.swiper-art-3 .swiper-pagination',
        clickable: true,
    },
    breakpoints: {
        640: { slidesPerView: 2 },
        1024: { slidesPerView: 3 },
    },
});

Вместо числа в slidesPerView можно написать 'auto' — тогда Swiper подберёт количество слайдов сам, исходя из их CSS-ширины. Удобно для карточек с фиксированным размером.

Пример 4: peek-эффект — слайды выглядывают из-за края

Трюк, который сразу даёт понять пользователю «тут можно листать»: следующий слайд чуть выглядывает из-за правого края. Достигается через slidesPerView: 1.25 :

const swiper4 = new Swiper('.swiper-art-4', {
    slidesPerView: 1.25,
    spaceBetween: 12,
    grabCursor: true,
});

Пример 5: эффект fade

Вместо сдвига можно сделать плавное появление. Параметр effect: "fade" переключает анимацию. Работает только с одним слайдом в ряд:

const swiper5 = new Swiper('.swiper-art-5', {
    effect: 'fade',
    fadeEffect: { crossFade: true },
    loop: true,
    pagination: {
        el: '.swiper-art-5 .swiper-pagination',
        clickable: true,
    },
    navigation: {
        prevEl: '.swiper-art-5 .swiper-button-prev',
        nextEl: '.swiper-art-5 .swiper-button-next',
    },
});

Пример 6: эффект coverflow

Помните iTunes с обложками альбомов? Это он. Эффект coverflow создаёт трёхмерную карусель с перспективой:

const swiper6 = new Swiper('.swiper-art-6', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
        rotate: 40,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
    },
    pagination: {
        el: '.swiper-art-6 .swiper-pagination',
        clickable: true,
    },
});

Swiper настройки — полный список основных параметров

Вот шпаргалка по самым нужным swiper настройкам:

new Swiper('.my-swiper', {
    // Основное
    direction: 'horizontal',   // 'vertical' для вертикального
    loop: true,                // бесконечная прокрутка
    initialSlide: 0,           // с какого слайда начинать

    // Слайды
    slidesPerView: 1,          // сколько слайдов показывать
    slidesPerGroup: 1,         // сколько пролистывать за раз
    spaceBetween: 20,          // отступ между слайдами (px)
    centeredSlides: false,     // центрировать активный слайд

    // Скорость и жесты
    speed: 300,                // скорость анимации (мс)
    grabCursor: true,          // курсор-рука при наведении
    touchRatio: 1,             // чувствительность свайпа
    resistanceRatio: 0.85,     // сопротивление на краях

    // Эффект
    effect: 'slide',           // 'fade', 'cube', 'coverflow', 'flip', 'cards'

    // Автопрокрутка
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
    },

    // Пагинация
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',       // 'progressbar', 'fraction', 'custom'
        clickable: true,
        dynamicBullets: true,  // уменьшает боковые точки
    },

    // Навигация
    navigation: {
        prevEl: '.swiper-button-prev',
        nextEl: '.swiper-button-next',
    },

    // Адаптивность
    breakpoints: {
        640: { slidesPerView: 2, spaceBetween: 20 },
        1024: { slidesPerView: 3, spaceBetween: 30 },
    },

    // События
    on: {
        slideChange() { console.log('Слайд изменился', this.activeIndex); },
        init() { console.log('Swiper инициализирован'); },
    },
});

Управление через JavaScript и TypeScript

Swiper можно контролировать программно: переключать слайды, останавливать автопрокрутку, слушать события. В TypeScript всё это строго типизировано:

import Swiper from 'swiper';
import type { SwiperOptions } from 'swiper/types';

const options: SwiperOptions = {
    loop: true,
    autoplay: { delay: 3000 },
};

const swiper = new Swiper('.my-swiper', options);

// Методы управления
swiper.slideNext();           // следующий слайд
swiper.slidePrev();           // предыдущий слайд
swiper.slideTo(3);            // перейти к слайду с индексом 3
swiper.autoplay.start();      // запустить автопрокрутку
swiper.autoplay.stop();       // остановить
swiper.destroy();             // уничтожить экземпляр

// Полезные свойства
console.log(swiper.activeIndex);    // текущий индекс
console.log(swiper.slides.length);  // количество слайдов
console.log(swiper.isBeginning);    // первый слайд?
console.log(swiper.isEnd);          // последний слайд?

// События
swiper.on('slideChange', () => {
    console.log('Активный слайд:', swiper.activeIndex);
});

swiper.on('reachEnd', () => {
    console.log('Дошли до конца');
});

Swiper React — компонент для React

Для React есть официальный пакет с готовыми компонентами. Никаких document.querySelector — всё в JSX-стиле:

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function MySlider() {
    return (
        <Swiper
            modules={[Navigation, Pagination, Autoplay]}
            spaceBetween={20}
            slidesPerView={1}
            loop={true}
            autoplay={{ delay: 3000, disableOnInteraction: false }}
            navigation
            pagination={{ clickable: true }}
        >
            <SwiperSlide>Слайд 1</SwiperSlide>
            <SwiperSlide>Слайд 2</SwiperSlide>
            <SwiperSlide>Слайд 3</SwiperSlide>
        </Swiper>
    );
}

Доступ к экземпляру Swiper в React через событие onSwiper :

import { useState } from 'react';
import type { Swiper as SwiperType } from 'swiper';

export default function MySlider() {
    const [swiperRef, setSwiperRef] = useState<SwiperType | null>(null);

    return (
        <>
            <Swiper onSwiper={setSwiperRef} /* ...другие пропсы */ >
                {/* слайды */}
            </Swiper>
            <button onClick={() => swiperRef?.slideNext()}>
                Следующий
            </button>
        </>
    );
}

Vue Swiper — компонент для Vue 3

Vue Swiper — официальный компонент из того же пакета. Синтаксис шаблонный, как и ожидаешь от Vue. Установите пакет и используйте компоненты в шаблоне:

<template>
    <swiper
        :modules="modules"
        :slides-per-view="1"
        :space-between="20"
        :loop="true"
        :autoplay="{ delay: 3000 }"
        :pagination="{ clickable: true }"
        navigation
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
        <swiper-slide>Слайд 1</swiper-slide>
        <swiper-slide>Слайд 2</swiper-slide>
        <swiper-slide>Слайд 3</swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import type { Swiper as SwiperType } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const modules = [Navigation, Pagination, Autoplay];

function onSwiper(swiper: SwiperType) {
    console.log('Swiper готов:', swiper);
}

function onSlideChange() {
    console.log('Слайд изменился');
}
</script>

Поддержка браузерами

Swiper 11 поддерживает все современные браузеры без полифиллов:

Chrome — с версии 61+
Firefox — с версии 60+
Safari — с версии 11+
Edge — с версии 79+
iOS Safari — с версии 11+
Android Chrome — с версии 61+

IE 11 не поддерживается начиная с Swiper 9. Если вам нужен IE — используйте Swiper 8, но это уже история.

Swiper — это слайдер, который не разочарует. Он достаточно простой, чтобы запустить за 10 минут, и достаточно гибкий, чтобы сделать всё что угодно. Если ваш проект на чистом HTML/JS, берите CDN-вариант и не усложняйте. Если на React или Vue, официальные компоненты сэкономят время.

Если вам нужен более лёгкий вариант без всяких зависимостей, посмотрите на Owl Carousel 2 — старый добрый слайдер на jQuery, который до сих пор прекрасно работает.

Вам может быть интересно: