Présentation de Swiper

Swiper est une bibliothèque JavaScript populaire pour créer des carrousels et diaporamas interactifs dans les applications web. Elle fournit une API riche avec des options de configuration flexibles pour personnaliser le comportement et l'apparence.

Paramètres de configuration clés

• L'autoplay est désactivé par défaut ; il nécessite une activation explicite via l'option autoplay.
• La pagination requiert l'option clickable: true pour permettre la navigation par clic sur les points.
• Pour activer le défilement en boucle, utilisez loop: true.
• Le défilement simulé sur PC peut être désactivé avec simulateTouch: false.

Intégration de Swiper

Pour inclure Swiper dans votre projet, ajoutez les fichiers CDN dans votre HTML :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

Structure HTML requise

Le conteneur Swiper doit suivre cette structure de base, avec des classes prédéfinies :

<div class="swiper-container monConteneur">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Contenu 1</div>
    <div class="swiper-slide">Contenu 2</div>
    <div class="swiper-slide">Contenu 3</div>
  </div>
  <!-- Éléments optionnels -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Initialisation et paramétrage

Pour créer une instance Swiper, instanciez l'objet avec un sélecteur CSS et un objet de configuration :

const carrousel = new Swiper('.monConteneur', {
  // Options personnalisées
});

Exemples de configuration

Activation de l'autoplay avec options avancées

Configurez l'autoplay avec un intervalle spécifique et maintenez-le après interaction utilisateur :

const diaporama = new Swiper('.monConteneur', {
  autoplay: {
    delay: 2500,
    disableOnInteraction: false
  }
});

Défilement vertical

Modifiez la direction pour un défilement de haut en bas :

const sliderVertical = new Swiper('.monConteneur', {
  direction: 'vertical'
});

Effets de transition variés

Appliquez des effets visuels comme le cube 3D :

const carrouselCube = new Swiper('.monConteneur', {
  effect: 'cube'
});

Personnalisation de la pagination

Utilisez des classes CSS pour styliser les indicateurs de pagination :

const carrouselAvecPagination = new Swiper('.monConteneur', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    bulletClass: 'indicateur-personnalise',
    bulletActiveClass: 'indicateur-actif'
  }
});

Gestion des événements souris

Arrêtez l'autoplay au survol et reprenez-le à la sortie :

const carrouselInteractif = new Swiper('.monConteneur', {
  autoplay: true
});

carrouselInteractif.el.addEventListener('mouseenter', () => {
  carrouselInteractif.autoplay.stop();
});

carrouselInteractif.el.addEventListener('mouseleave', () => {
  carrouselInteractif.autoplay.start();
});