UI Kit - Système de Carousel Travelski
Carousel de base
Carousel standard avec navigation et compteur (avec images)
01/05
<!-- Carousel de base -->
<div class="carousel-wrapper">
<div class="carousel" data-carousel>
<!-- Bouton partager (optionnel) -->
<button class="carousel-share-button carousel-overlay-button">
<span>Partager</span>
<img src="../icons/actions/share.svg" alt="Partager">
</button>
<!-- Container des slides -->
<div class="carousel-container">
<div class="carousel-track">
<div class="carousel-slide">
<img src="image1.jpg" alt="Description">
</div>
<div class="carousel-slide">
<img src="image2.jpg" alt="Description">
</div>
<!-- Plus de slides... -->
</div>
</div>
<!-- Navigation -->
<div class="carousel-nav">
<button class="carousel-arrow left" aria-label="Image précédente">
<img src="../icons/navigation/backward.svg" alt="Précédent">
</button>
<button class="carousel-arrow right" aria-label="Image suivante">
<img src="../icons/navigation/forward.svg" alt="Suivant">
</button>
</div>
<!-- Compteur -->
<div class="carousel-counter">
<span>01/05</span>
</div>
</div>
</div>
Carousel avec gradients colorés
Carousel avec divs de démonstration (gradients)
01/05
<!-- Carousel avec divs colorés -->
<div class="carousel-slide">
<div class="uikit-demo-image uikit-demo-image-1">1</div>
</div>
Variantes de taille
Carousel compact (200px)
01/03
<!-- Carousel compact -->
<div class="carousel-wrapper carousel--compact">
<!-- Contenu du carousel -->
</div>
Carousel avec ratio 16:9
01/03
<!-- Carousel avec ratio 16:9 -->
<div class="carousel-wrapper carousel--ratio-16-9">
<!-- Contenu du carousel -->
</div>
Options avancées
Carousel avec dots navigation
<!-- Carousel avec dots -->
<div class="carousel"
data-carousel
data-carousel-dots="true"
data-carousel-counter="false">
<!-- Contenu du carousel -->
<div class="carousel-dots"></div>
</div>
Carousel sans auto-play
01/02
<!-- Carousel sans auto-play -->
<div class="carousel"
data-carousel
data-carousel-autoplay="false">
<!-- Contenu du carousel -->
</div>
API JavaScript
Initialisation manuelle
// Initialisation automatique avec data-carousel
// Tous les carousels avec data-carousel sont initialisés automatiquement
// Initialisation manuelle
const carousel = new Carousel(element, {
autoPlay: true,
autoPlayDelay: 4000,
loop: true,
keyboard: true,
touch: true,
dots: false,
counter: true,
pauseOnHover: true
});
// MĂ©thodes disponibles
carousel.play(); // DĂ©marrer l'auto-play
carousel.pause(); // ArrĂŞter l'auto-play
carousel.next(); // Slide suivante
carousel.prev(); // Slide précédente
carousel.goTo(2); // Aller à une slide spécifique
carousel.getCurrentSlide(); // Obtenir l'index de la slide actuelle
carousel.getTotalSlides(); // Obtenir le nombre total de slides
carousel.destroy(); // DĂ©truire l'instance
// Événements
carousel.addEventListener('slideChange', (e) => {
console.log('Nouvelle slide:', e.detail.currentSlide);
});
Data Attributes
| Attribut | Valeur par défaut | Description |
|---|---|---|
data-carousel |
- | Active l'initialisation automatique du carousel |
data-carousel-autoplay |
"true" |
Active/désactive l'auto-play |
data-carousel-delay |
"4000" |
DĂ©lai entre les slides en millisecondes |
data-carousel-loop |
"true" |
Permet de boucler Ă la fin des slides |
data-carousel-dots |
"false" |
Affiche la navigation par dots |
data-carousel-counter |
"true" |
Affiche le compteur de slides |
data-carousel-keyboard |
"true" |
Active la navigation au clavier |
data-carousel-touch |
"true" |
Active le swipe sur mobile |
data-carousel-pause-on-hover |
"true" |
Met en pause l'auto-play au survol |
Notes d'Utilisation
📱 Responsive
Le carousel s'adapte automatiquement Ă la taille de l'Ă©cran :
- Mobile : Hauteur de 279px
- Tablette : Hauteur de 400px
- Desktop : Hauteur de 500px
- Large desktop : Hauteur de 600px
âś… Bonnes Pratiques
- Utilisez des images optimisées avec
loading="lazy" - Ajoutez toujours des attributs
altdescriptifs - Préférez les ratios d'aspect pour maintenir la cohérence
- Limitez le nombre de slides (5-10 maximum)
- Utilisez
data-carousel-autoplay="false"pour les galeries - Testez la navigation tactile sur mobile
- Assurez-vous que les boutons sont assez grands sur mobile
🚫 À Éviter
- Ne pas utiliser d'images trop lourdes (> 500KB)
- Éviter les auto-play trop rapides (< 3 secondes)
- Ne pas oublier les attributs ARIA pour l'accessibilité
- Éviter d'avoir plus de 10 slides dans un carousel
- Ne pas désactiver la navigation clavier sans raison
♿ Accessibilité
Le carousel inclut plusieurs fonctionnalités d'accessibilité :
- Navigation clavier : Flèches gauche/droite pour naviguer
- Labels ARIA : Tous les boutons ont des labels descriptifs
- Focus visible : Indicateurs clairs pour la navigation clavier
- Reduced motion : Animations désactivées si préféré
- Annonces : Les changements de slides sont annoncés