Framework7 - Swiper Slider

Opis

Suwak to najpotężniejszy i najbardziej nowoczesny suwak dotykowy, który jest dostępny w Framework7 z wieloma funkcjami.

Poniższy układ HTML pokazuje suwak -

<!-- 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>

Następujące klasy są używane dla suwaka -

swiper-container - Jest to element wymagany dla głównego kontenera slidera i służy do slajdów i paginacji.
Swiper-wrapper - Wymagany element do dodatkowych prowadnic owijających.
swiper-slide - Jest to pojedynczy element slajdu i może zawierać dowolny kod HTML w środku.
swiper-pagination - W przypadku punktorów paginacji jest opcjonalne i są tworzone automatycznie.

Możesz zainicjować swiper za pomocą JavaScript, używając powiązanych metod -

myApp.swiper(swiperContainer,parameters)

LUB

new Swiper(swiperContainer, parameters)

Obie metody służą do inicjalizacji suwaka z opcjami.

Powyższe metody zawierają następujące parametry -

swiperContainer- Jest to HTMLElement lub ciąg kontenera zgarniającego i jest wymagany.
parameters - Są to opcjonalne elementy zawierające obiekt z parametrami swiper.

Na przykład -

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

Możliwe jest uzyskanie dostępu do instancji swipera, a właściwość swiper kontenera suwaka ma następujący element HTML -

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

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

W poniższej tabeli możesz zobaczyć różne sposoby i typy machnięcia -

S.Nr	Typy i opis suwaków
1	Domyślny suwak z paginacją Jest to nowoczesny suwak dotykowy, a suwak domyślnie przesuwa poziomo.
2	Zamiatarka pionowa Ten działa również jako domyślny suwak, ale przesuwa się pionowo.
3	Z Przestrzenią Między Slajdami Ten suwak służy do zapewnienia odstępu między dwoma slajdami.
4	Wiele suwaków Ten suwak używa więcej niż jednego suwaka na jednej stronie.
5	Zagnieżdżone suwaki Jest to połączenie slajdów pionowych i poziomych.
6	Kontrole niestandardowe Służy do niestandardowych elementów sterujących do wybierania lub przesuwania dowolnego slajdu.
7	Powolne ładowanie Może być używany do plików multimedialnych, których ładowanie zajmuje trochę czasu.