Файлы Swiper. HTML-макет. Инициализация с параметрами.

Полный HTML макет Swiper

<!-- Slider main container -->
<div class="swiper">
  <!-- 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>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Файлы

Swiper включает в себя различные наборы CSS, Less и SCSS. Полный список вы можете посмотреть в официальной документации. Веб-ассет WT JSwiper для Joomla предоставляет только bandle сборку. 

swiper-bundle.min.css

Включает все стили Swiper для всех модулей Swiper (например, Navigation, Pagination, и т.д.). Файл находится в media/plg_system_wtjswiper/css. Минифицирован.

swiper-bundle.min.js

Включает в себя все модули Swiper. Находится в media/plg_system_wtjswiper/js. Минифицирован. 

Инициализация Swiper с параметрами

Теперь, когда добавлен HTML макет и подключены файлы Swiper нам нужно инициализировать его используя следующую функцию:

new Swiper(swiperContainer, parameters) - инициализация с параметрами

• swiperContainer - HTMLElement или строка (CSS селектор) HTML элемента для swiper контейнера. Обязательный параметр.
• parameters - object - json-объект  с параметрами для Swiper. Не обязательный параметр.
• Метод возвращает инициализированный экземпляр Swiper

Например:

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

После инициализации Swiper появляется доступ к функционалу экземпляра Swiper через HTMLElement, на котором он был инициализирован. Используйте для этого свойство swiper HTML-элемента, где был инициализирован Swiper:

const swiper = document.querySelector('.swiper').swiper;

// Now you can use all slider methods like
swiper.slideNext();

See also