Framework7 - Swiper Slider

Descrizione

Il cursore a scorrimento è il più potente e moderno dispositivo di scorrimento tattile e viene fornito in Framework7 con molte funzionalità.

Il seguente layout HTML mostra il cursore di scorrimento:

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

Le seguenti classi vengono utilizzate per il cursore di scorrimento:

  • swiper-container - È un elemento obbligatorio per il contenitore dello slider principale e viene utilizzato per diapositive e impaginazioni.

  • Swiper-wrapper - È un elemento obbligatorio per diapositive wrapper aggiuntive.

  • swiper-slide - È un singolo elemento della diapositiva e potrebbe contenere qualsiasi HTML all'interno.

  • swiper-pagination - È facoltativo per i punti elenco di impaginazione e questi vengono creati automaticamente.

Puoi inizializzare lo swiper con JavaScript usando i suoi metodi correlati -

myApp.swiper(swiperContainer,parameters)

O

new Swiper(swiperContainer, parameters)

Entrambi i metodi vengono utilizzati per inizializzare il dispositivo di scorrimento con le opzioni.

I metodi sopra indicati contengono i seguenti parametri:

  • swiperContainer- È HTMLElement o stringa di un contenitore di swiper ed è obbligatorio.

  • parameters - Questi sono elementi opzionali contenenti oggetti con parametri di scorrimento.

Ad esempio:

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

È possibile accedere all'istanza di uno swiper e la proprietà swiper del contenitore dello slider ha il seguente elemento HTML:

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

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

Puoi vedere i diversi modi e tipi di swiper nella seguente tabella:

S.No Tipi e descrizione di Swiper
1 Swiper predefinito con impaginazione

È un moderno dispositivo di scorrimento tattile e il cursore scorre orizzontalmente, per impostazione predefinita.
2 Swiper verticale

Questo funziona anche come uno swiper predefinito ma scorre verticalmente.
3 Con spazio tra le diapositive

Questo swiper viene utilizzato per lasciare spazio tra due diapositive.
4 Swipers multipli

Questo swiper utilizza più di uno swiper su una singola pagina.
5 Swipers annidati

È la combinazione di diapositive verticali e orizzontali.
6 Controlli personalizzati

Viene utilizzato per i controlli personalizzati per scegliere o scorrere qualsiasi diapositiva.
7 Caricamento pigro

Può essere utilizzato per file multimediali, il cui caricamento richiede tempo.