JavaScript: Swiper - слайдер на чистом js

Swiper - это мощный и современный слайдер, который широко используется в веб-разработке из-за своей гибкости и настраиваемости. Он предоставляет множество опций для создания слайдеров, каруселей, галерей и даже сложных интерактивных интерфейсов. Swiper поддерживает сенсорные жесты, что делает его отличным выбором для мобильных и сенсорных устройств.

Swiper очень прост в интеграции и использовании, вот пример базовой настройки слайдера с использованием Swiper

1. Подключите Swiper к вашему проекту.

Вы можете скачать его и подключить локально или использовать CDN. Ниже пример подключения через CDN:

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

2. Добавьте HTML-разметку для Swiper:

<!-- Swiper -->
<div class="swiper">
	<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>

3. Инициализируйте Swiper в вашем JS-файле:

# параметры https://swiperjs.com/swiper-api#parameters
const swiper = new Swiper('.swiper', {
	// Настройки Swiper
	loop: true, // Бесконечная прокрутка
	pagination: {
		el: '.swiper-pagination',
		clickable: true, // Делает пагинацию кликабельной
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});