Сначала нам нужно импортировать библиотеку swiper.js в наш проект.
Есть несколько способов импорта, как описано в API
Начало работы с Swiper (swiperjs.com)
Мы будем использовать локальный импорт, загрузив самое необходимое из источника.
- УНПКГ — swiper (Источник)
После того, как все установлено, мы должны импортировать их в html-файл, как показано ниже.
Теперь все настроено, пришло время создать наш первый swiper!
Сначала мы должны создать пустой файл JavaScript, поэтому мы можем инициализировать swiper.js и сделать любые настройки, которые захотим;
- управление клавиатурой
- нажмите кнопку управления
- точки останова для адаптивного дизайна и т. д.
После создания файла первым шагом для использования нашего swiper является его инициализация, как показано ниже;
С помощью этого кода мы добавили некоторые функции с помощью swiper API.
Я добавил описания со строками комментариев, см. код выше или проверьте API ниже
- Swiper API (swiperjs.com) (источник API)
Второй шаг — инициализировать swiper из html-файла. Я добавил маркеры разбиения на страницы, стрелки навигации и полосу прокрутки с помощью кода ниже;
Как видите, я нашел 5 изображений в Интернете и добавил их в классы swiper-slide, чтобы эти классы работали, вам также нужно использовать обертку.
Без настройки CSS swiper должен выглядеть так по умолчанию;
Давайте сделаем его красивее?
После CSS swiper должен выглядеть так:
Поздравляем, вы создали свой первый swiper!
Если вы хотите получить доступ и поиграть с кодом или загрузить изображения, вот полный проект;
