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.

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.

exemple de code complet

Pour que les styles soient bien appliqués, il faut importer les styles de bases de Swiper.

Voir toutes les options de Swiper

Variantes

Les variantes 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.

Voir un démo de « defaut »

SPLIT

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

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

exemple de code complet
Voir un démo de « split »