Cette composante permet d'instancier un carousel sur un élément html.
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 TimTools, référez-vous à la documentation complète
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).
Dans la structure TimTools, la ComponentFactory s'occupe de l'instantiation des composantes.
Voir la componentFactoryLes variantes permettent d'ajouter des groupes d'options préfaits afin de personaliser l'affichage d'un carousel.
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 »Cette variante permet d'avoir 2.5 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 :
Les paramètres permettent d'ajuster des options précises afin de personaliser davantage le comportement du carousel.
Ce paramètre vous permet de faire défiler automatiquement le carousel.
Voir un démo du « autoplay »Ce paramètre vous permet de faire défiler à l'infini le carousel.
Voir un démo du « loop »À 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"