Carousel Carrousel
Introduction
Le composant Carousel est un diaporama haute performance à défilement natif qui pagine à travers un ensemble de diapositives. Conçu spécifiquement pour la construction de pages CMS et rendu statique sans JS par défaut, il s'appuie sur les primitives CSS scroll-snap modernes plutôt que sur une lourde logique de transformation JS.
Par conséquent, le balayage tactile, le défilement au trackpad et la navigation au clavier par flèches fonctionnent instantanément même avant l'hydratation côté client. JavaScript est ajouté avec élégance uniquement lorsque les indicateurs, les boutons précédent/suivant et les déclencheurs de lecture automatique sont cliqués.
Utilisation
Vous pouvez configurer et ordonner les diapositives, définir les mises en page d'affichage et contrôler les propriétés de lecture automatique.
Diaporama de base
Une bannière d'images standard avec des diapositives pleine largeur, des légendes superposées et des liens de navigation. Idéal pour les en-têtes hero ou les vitrines de page principale.
{
"blockType": "carousel",
"slides": [
{
"image": "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80",
"caption": "Real-Time Analytics — Pulse delivers live data and dashboards with sub-second streaming latency.",
"href": "/features/analytics"
},
{
"image": "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=800&q=80",
"caption": "AI-Powered Detection — Smart anomaly detection notifies your team before production breaks.",
"href": "/features/ai-detection"
},
{
"image": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80",
"caption": "Unified Team Workspaces — Share annotated charts and build custom workspaces with ease.",
"href": "/features/workspaces"
}
]
}
Bannière autoplay avec contrôles au survol
Configurez le carrousel pour avancer automatiquement à une vitesse donnée. Pour garder l'interface accessible et discrète, activez pauseOnHover afin que les utilisateurs puissent mettre la lecture en pause simplement en survolant une diapositive.
{
"blockType": "carousel",
"loop": true,
"pauseOnHover": true,
"autoplayDelay": 3500,
"slides": [
{
"image": "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80",
"caption": "Developer Tools — Integrate your APIs in minutes with our native SDK wrappers.",
"href": "/developers"
},
{
"image": "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&q=80",
"caption": "Ironclad Security — SOC2-compliant data storage and end-to-end encryption by default.",
"href": "/security"
}
]
}
Disposition multi-diapositives
Affichez plusieurs diapositives côte à côte simultanément. Excellent pour les listes de produits, les annuaires d'équipe et les galeries de portfolios. Définissez l'attribut slidesPerPage ainsi qu'un spacing personnalisé entre les éléments.
{
"blockType": "carousel",
"slidesPerPage": 2,
"spacing": "16px",
"slides": [
{
"image": "https://images.unsplash.com/photo-1542744094-3a31f103e35f?w=400&q=80",
"caption": "Marketing Solutions",
"href": "/solutions/marketing"
},
{
"image": "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&q=80",
"caption": "Financial Growth",
"href": "/solutions/financial"
},
{
"image": "https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=400&q=80",
"caption": "HR Management",
"href": "/solutions/hr"
},
{
"image": "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=400&q=80",
"caption": "Executive Advisory",
"href": "/solutions/consulting"
}
]
}
Flux de galerie vertical
Faites défiler le contenu de vos diapositives verticalement plutôt qu'horizontalement. Excellent pour les cartes de contenu mobile-first, les bobines média ou les panneaux de navigation latéraux.
{
"blockType": "carousel",
"orientation": "vertical",
"slides": [
{
"image": "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=800&q=80",
"caption": "Curated Feed — Category Spotlight"
},
{
"image": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&q=80",
"caption": "Trending Creator Profile"
},
{
"image": "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=800&q=80",
"caption": "Featured Technical Portfolio"
}
]
}
Thème accentué avec contrôles superposés
Faites flotter les déclencheurs précédent/suivant et les points directement au-dessus des images (au lieu de les placer en dessous) à l'aide de la propriété inline, et teintez les indices visuels actifs avec un jeton colorPalette accentué.
{
"blockType": "carousel",
"inline": true,
"colorPalette": "purple",
"slides": [
{
"image": "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?w=800&q=80",
"caption": "Overlay Design Layout"
},
{
"image": "https://images.unsplash.com/photo-1531403009284-440f080d1e12?w=800&q=80",
"caption": "High Fidelity Previews"
}
]
}
Propriétés
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
slides | List | - | Une collection ordonnée de diapositives individuelles (voir schéma ci-dessous). |
slidesPerPage | Number | 1 | Nombre de diapositives visibles dans le viewport simultanément. |
spacing | String | - | Espace/écart compatible CSS entre les diapositives visibles (ex. "16px", "1rem"). |
loop | Boolean | false | Si le carrousel revient à la première diapositive en atteignant la fin. |
autoplayDelay | Number | - | Minuterie d'avance automatique en millisecondes. Laisser vide ou omettre pour désactiver complètement la lecture automatique. |
pauseOnHover | Boolean | true | Met en pause la lecture automatique lorsque le pointeur de l'utilisateur survole les diapositives. |
orientation | Select | horizontal | Direction de la disposition de défilement. Options : horizontal, vertical. |
inline | Boolean | false | Superpose les contrôles de navigation et les points par-dessus le média de la diapositive plutôt que de les placer dans un conteneur en dessous. |
colorPalette | Select | - | Couleur d'accentuation visuelle pour les boutons et les indicateurs. Options : blue, green, red, purple, orange, amber, cyan, slate. |
Schéma de l'élément slide
Chaque entrée du paramètre slides accepte les propriétés suivantes :
| Propriété | Type | Requis | Description |
|---|---|---|---|
image | Image | Oui | Chemin ou URL de l'image d'arrière-plan de la diapositive. |
caption | String | Non | Texte de description superposé rendu dynamiquement dans la région inférieure de la diapositive. |
href | String | Non | URL de navigation ou route de page localisée que la diapositive entière déclenche au clic. |
Notes d'architecture
- Aucun décalage de mise en page pendant le SSR : Pour éliminer les sauts de mise en page lors du rendu côté serveur, les marqueurs de point d'ancrage et les largeurs du viewport sont précalculés à l'aide d'une formule structurelle prévisible correspondant aux paramètres
slideCountetslidesPerPage. - Délégation d'événements robuste : Tous les gestionnaires de clic pour les indicateurs, la pagination par points et les déclencheurs de pause sont gérés via un seul écouteur d'événements unifié délégué depuis le conteneur racine. Cela évite d'assigner de façon répétitive des écouteurs d'événements aux composants statiques à l'intérieur du modèle de page hydraté.
- CSS Scroll Snap : Le CSS scroll-snap pur gère l'alignement de la mise en page nativement. Sur les écrans tactiles mobiles et les trackpads modernes, les transitions de défilement par glissement restent fluides et fonctionnent correctement même lorsque JavaScript est désactivé ou retardé.