Swiper - современный мобильный сенсорный слайдер с аппаратным ускорением переходов.
Swiper - это открытая, бесплатная и современная библиотека сенсорных слайдеров для мобильных устройств с аппаратным ускорением переходов и удивительным нативным поведением. Он предназначен для использования на мобильных веб-сайтах, в мобильных веб-приложениях и мобильных нативных / гибридных приложениях.
Примечание. S wiper не совместим со всеми платформами, это современный сенсорный слайдер, ориентированный только на современные приложения / платформы, чтобы обеспечить максимальное удобство и простоту. Убедитесь, что вы используете последнюю версию браузера, чтобы упростить этот процесс.
Начиная
Мы можем установить Swiper с помощью npm или подключить его через CDN.
npm
npm install swiper
Используйте Swiper из CDN
Если вы не хотите устанавливать Swiper через npm, вы можете использовать его из CDN, например:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
Swiper API
<!-- Slider main container --> <div class="swiper-container">
<!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div>
</div>
Инициализировать Swiper
Теперь, когда у нас есть HTML Swiper, нам нужно инициализировать его, используя следующую функцию:
new Swiper(swiperContainer, parameters)
- инициализировать Swiper с параметрами.
swiperContainer
-HTMLElement
или строка (с селектором CSS) HTML-элемента контейнера Swiper. Необходимый.parameters
- объект - объект с параметрами Swiper. По желанию.- Метод возвращает инициализированный экземпляр Swiper.
Пример
import Swiper from 'swiper'
const mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
После инициализации Swiper можно получить доступ к экземпляру Swiper на его HTMLElement
. Это свойство swiper
элемента контейнера HTML Swiper:
const mySwiper = document.querySelector('.swiper-container').swiper
// use slider methods like mySwiper.slideNext();
События
Swiper содержит множество полезных событий, которые вы можете прослушать. События могут быть назначены двумя способами:
- Использование параметра
on
при инициализации swiper:
const mySwiper = new Swiper('.swiper-container', { // ... on: { init: function () { console.log('swiper initialized'); } }, };
2. С помощью метода on
после инициализации Swiper.
const mySwiper = new Swiper('.swiper-container', { // ... }; mySwiper.on('slideChange', function () { console.log('slide changed'); });
Примечание. Ключевое слово this
в обработчике событий всегда указывает на экземпляр Swiper.
Что дальше?
Как видите, интегрировать Swiper в свой веб-сайт или приложение очень просто. Итак, вот ваши следующие шаги:
- Перейдите в Документацию по API, чтобы узнать больше о Swiper API и о том, как им управлять.
- Посмотрите доступные демки.
- Если у вас есть вопросы о Swiper, задавайте их в Stack Overflow и не забудьте пометить свой вопрос тегом
swiper
. - Если вы обнаружили ошибку, создайте вопрос на GitHub.
Заключение
Если вы новичок в JavaScript и хотите выучить язык, я рекомендую начать с чтения книг в сочетании с созданием вещей. Начните с книги « Более разумный способ изучения JavaScript » и вот список интересных приложений для создания.
Спасибо за чтение, надеюсь, вы узнали что-то новое. Помните, что, как разработчики, мы должны постоянно быть открытыми и приветствовать новые инструменты и библиотеки, которые облегчают нам жизнь.