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 содержит множество полезных событий, которые вы можете прослушать. События могут быть назначены двумя способами:

  1. Использование параметра 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 » и вот список интересных приложений для создания.

Спасибо за чтение, надеюсь, вы узнали что-то новое. Помните, что, как разработчики, мы должны постоянно быть открытыми и приветствовать новые инструменты и библиотеки, которые облегчают нам жизнь.