Framework7 - Curseur Swiper

La description

Le curseur de balayage est le curseur tactile le plus puissant et le plus moderne et entre dans Framework7 avec de nombreuses fonctionnalités.

La disposition HTML suivante montre le curseur de balayage -

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

Les classes suivantes sont utilisées pour le curseur de balayage -

• swiper-container - C'est un élément obligatoire pour le conteneur de curseur principal et il est utilisé pour les diapositives et les paginations.

• Swiper-wrapper - C'est un élément obligatoire pour les diapositives supplémentaires.

• swiper-slide - Il s'agit d'un élément de diapositive unique et il peut contenir n'importe quel HTML à l'intérieur.

• swiper-pagination - Il est facultatif pour les puces de pagination et celles-ci sont créées automatiquement.

Vous pouvez initialiser le swiper avec JavaScript en utilisant ses méthodes associées -

myApp.swiper(swiperContainer,parameters)

OU

new Swiper(swiperContainer, parameters)

Les deux méthodes sont utilisées pour initialiser le curseur avec des options.

Les méthodes données ci-dessus contiennent les paramètres suivants -

• swiperContainer- Il s'agit d'un HTMLElement ou d'une chaîne d'un conteneur de balayage et il est obligatoire.

• parameters - Ce sont des éléments optionnels contenant un objet avec des paramètres de balayage.

Par exemple -

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

Il est possible d'accéder à une instance de swiper et la propriété swiper du conteneur du slider a l'élément HTML suivant -

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

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

Vous pouvez voir les différentes manières et types de swiper dans le tableau suivant -

S. Non	Types de balayage et description
1	Balayeur par défaut avec pagination Il s'agit d'un curseur tactile moderne et le balayage glisse horizontalement, par défaut.
2	Balayeur vertical Celui-ci fonctionne également comme un swiper par défaut, mais il glisse verticalement.
3	Avec espace entre les diapositives Ce swiper est utilisé pour laisser de l'espace entre deux diapositives.
4	Balais multiples Ce swiper utilise plus d'un swipers sur une seule page.
5	Swipers imbriqués C'est la combinaison de diapositives verticales et horizontales.
6	Contrôles personnalisés Il est utilisé pour les contrôles personnalisés pour choisir ou faire glisser n'importe quelle diapositive.
sept	Chargement paresseux Il peut être utilisé pour un fichier multimédia, qui prend du temps à charger.