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', }, });
Комментарии