Framework7 - Ползунок Swiper

Описание

Ползунок Swiper - самый мощный и современный сенсорный слайдер, входящий в Framework7 с множеством функций.

В следующем макете HTML показан ползунок Swiper -

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <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>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

Следующие классы используются для слайдера Swiper -

swiper-container - Это обязательный элемент для основного контейнера слайдера, он используется для слайдов и пагинации.
Swiper-wrapper - Это обязательный элемент для дополнительных слайдов обертки.
swiper-slide - Это отдельный элемент слайда, внутри он может содержать любой HTML-код.
swiper-pagination - Это необязательно для маркеров нумерации страниц, и они создаются автоматически.

Вы можете инициализировать swiper с помощью JavaScript, используя связанные с ним методы -

myApp.swiper(swiperContainer,parameters)

ИЛИ ЖЕ

new Swiper(swiperContainer, parameters)

Оба метода используются для инициализации ползунка с параметрами.

Вышеуказанные методы содержат следующие параметры -

swiperContainer- Это HTMLElement или нить свайпера, и это обязательно.
parameters - Это необязательные элементы, содержащие объект с параметрами swiper.

Например -

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

Можно получить доступ к экземпляру swiper, и свойство swiper контейнера слайдера имеет следующий HTML-элемент:

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

Вы можете увидеть различные способы и типы свайпера в следующей таблице -

S.No	Типы и описание Swiper
1	Swiper по умолчанию с разбивкой на страницы Это современный сенсорный слайдер, по умолчанию свайпер перемещается по горизонтали.
2	Вертикальный Swiper Этот также работает как свайпер по умолчанию, но смахивает вертикально.
3	С промежутком между слайдами Этот свайпер используется, чтобы освободить пространство между двумя слайдами.
4	Несколько свайперов Этот свайпер использует более одного свайпера на одной странице.
5	Вложенные свайперы Это сочетание вертикальных и горизонтальных горок.
6	Пользовательские элементы управления Он используется для настраиваемых элементов управления, чтобы выбрать любой слайд или провести пальцем по нему.
7	Ленивая загрузка Его можно использовать для мультимедийных файлов, загрузка которых требует времени.