Composant du carrousel

Le composant du carrousel des composants principaux permet à l’auteur de contenu de présenter le contenu dans un carrousel navigable.

Utilisation

En utilisation le composant du carrousel, l’auteur de contenu peut organiser le contenu dans un carrousel de diapositives rotatif.

La boîte de dialogue de modification permet à l’auteur de contenu de créer, nommer et classer plusieurs diapositives et d’activer la transition automatique avec délai. À l’aide de la boîte de dialogue de conception, l’auteur du modèle peut définir quels composants peuvent être ajoutés au carrousel, activer ou désactiver les transitions automatiques et personnaliser les styles.

Version et compatibilité

La version actuelle du composant du carrousel est v1, qui a été introduite avec la version 2.2.0 des composants principaux d’octobre 2018. Elle est décrite dans ce document.

Le tableau ci-après présente en détail toutes les versions prises en charge du composant, les versions AEM avec lesquelles les versions du composant sont compatibles et les liens vers la documentation pour les versions précédentes.

Pour plus d’informations sur les versions et les publications des composants principaux, voir le document sur les versions des composants principaux.

Exemple de sortie de composant

Pour tester le composant du carrousel, des exemples d’options de configuration, ainsi que des sorties HTML et JSON, consultez la bibliothèque de composants.

Détails techniques

La documentation technique la plus récente sur le composant du carrousel se trouve sur GitHub.

Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux.

Créer un lien profond vers un panneau

Les composants Carrousel, Onglets et Accordéon prennent en charge le lien direct vers un panneau au sein du composant.

Pour ce faire :

1. Affichez la page avec le composant à l’aide de l’option Afficher comme publié(e) dans l’éditeur de page.
2. Examinez le contenu de la page et identifiez l’ID du panneau.
   • Par exemple, id="carousel-bfe4fa6647-item-47f1a7ca67-tabpanel"
3. L’ID devient l’ancre que vous pouvez ajouter à l’URL à l’aide d’un hachage (#).
   • Par exemple, https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#carousel-bfe4fa6647-item-47f1a7ca67-tabpanel

En accédant à l’URL avec l’ID de panneau comme ancre, le navigateur fait défiler directement le composant et affiche le panneau spécifié. Si le panneau est configuré pour ne pas être affiché par défaut, il est automatiquement défilé.

Boîte de dialogue de modification

La boîte de dialogue de modification permet à l’auteur de contenu d’ajouter, de renommer et de réorganiser les diapositives, ainsi que de définir les paramètres de transition automatique.

Onglet Éléments

Utilisez le bouton Ajouter pour ouvrir le sélecteur de composants afin de choisir le composant à ajouter sous forme d’onglet. Une fois le composant ajouté, une entrée est ajoutée à la liste qui contient les colonnes suivantes :

• Icône : icône du type de composant de l’onglet pour une identification facile dans la liste. Pointez dessus pour afficher le nom complet du composant sous forme d’info-bulle.
• Description : description utilisée comme texte de l’onglet. Par défaut, il s’agit du nom du composant sélectionné pour l’onglet.
• Supprimer : appuyez ou cliquez sur cette option pour supprimer l’onglet du composant Onglets.
• Réorganiser : appuyez ou cliquez sur cette option et faites glisser pour classer les onglets.

Onglet Propriétés

Dans l’onglet Propriétés, la personne à l’origine du contenu peut définir les diapositives pour la transition automatique.

• Élément actif : la personne à l’origine du contenu peut définir quel onglet est actif lorsque la page est chargée.
• Transition automatique des diapositives : lorsque cette option est activée, le composant passe automatiquement à la diapositive suivante après un délai spécifié.
• Délai de transition : lorsque la transition automatique des diapositives est sélectionnée, cette valeur est utilisée pour définir le délai entre les transitions (en millisecondes).
• Désactiver la pause automatique lors du survol : lorsque l’option Transition automatique des diapositives est sélectionnée, la transition du carrousel se met automatiquement en pause chaque fois que l’utilisateur survole le carrousel. Sélectionnez cette option pour que la transition ne soit pas interrompue.
• ID : cette option permet de contrôler l’identifiant unique du composant dans le code HTML ainsi que dans la couche de données.
  • Si rien n’est indiqué, un ID unique est généré automatiquement et peut être trouvé en examinant la page obtenue.
  • Si un ID est spécifié, il incombe à l’auteur de s’assurer qu’il est unique.
  • La modification de l’ID peut avoir un impact sur le suivi CSS, JS et de couche de données.

Onglet Accessibilité

Dans l’onglet Accessibilité, les valeurs peuvent être définies pour les libellés d’accessibilité ARIA du composant.

• Libellé : valeur d’un attribut aria-label pour le carrousel, qui décrit le contenu du carrousel.
• Précédent : valeur d’un attribut aria-label pour le libellé du bouton précédent dans la navigation du carrousel.
• Suivant : valeur d’un attribut aria-label pour le libellé du bouton suivant dans la navigation du carrousel.
• Lecture : valeur d’un attribut aria-label pour le libellé du bouton de lecture dans la navigation du carrousel.
• Pause : valeur d’un attribut aria-label pour le libellé du bouton de pause dans la navigation du carrousel.
• Tablist : valeur d’un attribut aria-label pour le libellé de la liste d’éléments dans la navigation du carrousel.
• Définir l’attribut aria-label de l’élément comme titre : si cette option est cochée, le titre de l’élément du carrousel est automatiquement défini en fonction de la description de son attribut aria-label.

Sélectionner un panneau

L’auteur du contenu peut utiliser l’option Sélectionner un panneau de la barre d’outils des composants pour passer à une autre diapositive afin de modifier et de réorganiser facilement l’ordre des diapositives.

Lorsque vous sélectionnez l’option Sélectionner un panneau dans la barre d’outils des composants, les diapositives configurées s’affichent sous forme de liste déroulante.

• La liste est triée selon la disposition assignée des diapositives et est répercutée dans la numérotation.
• Le type de composant de la diapositive est affiché en premier, suivi de la description de la diapositive en police plus claire.

• Lorsque vous appuyez ou cliquez sur une entrée dans la liste déroulante, la vue est commutée dans l’éditeur.
• Vous pouvez réorganiser la diapositive en place à l’aide des poignées de glissement.

Boîte de dialogue de conception

La boîte de dialogue de conception permet à l’auteur du modèle de définir les composants qui peuvent être ajoutés en tant que diapositives au composant du carrousel, ainsi que de définir les valeurs par défaut de la transition automatique et les styles personnalisés disponibles pour l’auteur du contenu.

Onglet Propriétés

L’onglet Propriétés permet de définir les paramètres par défaut des transitions de diapositives lorsqu’un auteur de contenu ajoute le composant du carrousel à une page.

• Transition automatique des diapositives : définit si par défaut l’option permettant d’avancer automatiquement le carrousel à la diapositive suivante est activée lorsque la personne à l’origine du contenu ajoute le composant du carrousel à une page.
• Ajouter les éléments de contrôle : lorsque cette case est cochée, les éléments de contrôle sont placés devant les éléments de carrousel pour en améliorer l’accessibilité.

Onglet Composants autorisés

L’onglet Composants autorisés permet de définir les composants pouvant être ajoutés en tant que diapositives au composant du carrousel par l’auteur du contenu.

L’onglet Composants autorisés fonctionne de la même manière que l’onglet du même nom lors de la définition de la stratégie et des propriétés d’un conteneur de mises en page dans l’éditeur de modèles.

Onglet Styles

Le composant du carrousel prend en charge le système de style AEM.

Couche de données client Adobe

Le composant Carrousel prend en charge la couche de données client Adobe.

Ressources Business.Adobe.com