Carousel

Cette composante permet d'instancier un carousel sur un élément html.

Dépendance

Swiper

Afin d'utiliser cette composante, vous devrez vous assurer que la dépendance npm swiper soit installée dans votre projet.

Si vous n'êtes pas dans la structure NPM ou domComp, référez-vous à la documentation complète

Comment l'utiliser

Afin d'utiliser la composante, mettre l'attribut data-component="Carousel" sur une structure html respectant celle de la librairie Swiper.

Pour que les styles soient bien appliqués, il faut importer les styles de bases de Swiper ainsi que les modules supportés (navigation et pagination).

Variants

Les variants permettent d'ajouter des groupes d'options préfaits afin de personaliser l'affichage d'un carousel.

DÉFAUT

Cette variante permet d'avoir une diapositive à la fois dans tous les résolutions d'écran. Elle ne requiert aucune configuration supplémentaire.

SPLIT

Cette variante permet d'avoir 2.5 diapositives du carousel visible en simultanné sur grand écran (768px et plus), mais seulement une diapositive sur écran plus petit (767px et moins).

Pour activer cette variante, il faut ajouter l'attribut suivant sur l'élément qui est votre component :

DIAPO

Cette variante permet d'avoir 1.5 diapositives du carousel visible en simultanné, un espacement de 32px entre les slides, un autoplay de 1 seconde entre les slides et qui s'arrête lorsque la souris le survol et joue en loop.

Pour activer cette variante, il faut ajouter l'attribut suivant sur l'élément qui est votre component :

NAVEXT

Ce variant permet de donner un parent au swiper, rendant le swiper frère de la naviguation et de la pagination, pratique pour avoir une naviguation qui n'est pas par dessus les slides.

Pour activer cette variante, il faut ajouter, sur l'élément que vous désirez comme parent du swiper, les attributs data-component='Carousel' et data-variant='navext'. Il faut également ajouter la naviguation et la pagination dans un élément frère du swiper.

Paramètres

Les paramètres permettent d'ajuster des options précises afin de personaliser davantage le comportement du carousel.

AUTOPLAY

Ce paramètre vous permet de faire défiler automatiquement le carousel selon une vitesse en milisecondes.

LOOP

Ce paramètre vous permet de faire défiler à l'infini le carousel.

GAP

Ce paramètre vous permet de faire d'inclure un espacement entre les slides.

SLIDES

Ce paramètre vous permet de définir le nombre de slides qui apparaitront à l'écran.
Dans l'exemple suivant, le carousel possède 3 slides.

Comment l'utiliser en dehors de domComp

À l'intérieur d'un fichier JavaScript, importez la classe `Carousel` que vous aurez préalablement intégré à votre projet.

Dans l'exemple ci-dessus, element est égal au HTMLElement qui l'attribut data-component="Carousel"