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.