Учебники

Framework7 — Swiper Slider

Декабрь 31, 2018

Слайдер 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-container — обязательный элемент для контейнера основного слайдера, используемый для слайдов и нумерации страниц.

Swiper-wrapper — обязательный элемент для дополнительных слайдов.

swiper-slide — это отдельный элемент слайда, который может содержать любой HTML- код внутри.

swiper-pagination — необязателен для маркеров нумерации страниц, которые создаются автоматически.

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

myApp.swiper(swiperContainer,parameters)

ИЛИ ЖЕ 

new Swiper(swiperContainer, parameters)

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

Приведенные выше методы содержат следующие параметры —

  • swiperContainer — это HTMLElement или строка контейнера swiper, и он необходим.

  • параметры — это необязательные элементы, содержащие объект с параметрами swiper.

swiperContainer — это HTMLElement или строка контейнера swiper, и он необходим.

параметры — это необязательные элементы, содержащие объект с параметрами 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();

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

Это современный сенсорный слайдер, и по умолчанию он перемещается горизонтально.

Этот также работает как swiper по умолчанию, но он проводит по вертикали.

Этот swiper используется, чтобы дать пространство между двумя слайдами.

Этот swiper использует более одного swiper на одной странице.

Это сочетание вертикальных и горизонтальных горок.

Он используется для пользовательских элементов управления, чтобы выбрать или провести любой слайд.

Он может быть использован для мультимедийного файла, который требует времени для загрузки.

54
Share: