AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-carousel

Carrousel générique permettant d'afficher plusieurs éléments de contenu similaires le long d'un axe horizontal. Ce composant a été conçu pour offrir une flexibilité et des performances élevées.

Script requis <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Mises en page compatibles
  • carrousel : fixed, fixed-height et nodisplay.
  • diapositives : fill, fixed, fixed-height, flex-item, nodisplay et responsive.
Exemples AMP By Example :

Comportement

Chacun des éléments enfants immédiats du composant amp-carousel est considéré comme un élément du carrousel. Chacun de ces nœuds peut également comporter des éléments enfants HTML arbitraires.

Le carrousel se compose d'un nombre arbitraire d'éléments, ainsi que de flèches de navigation facultatives permettant d'avancer ou de reculer d'un seul élément.

Le carrousel change d'élément lorsque l'utilisateur balaie l'écran, utilise les touches fléchées ou clique sur une flèche de navigation facultative.

<amp-carousel width="450"
  height="300">
  <amp-img src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>
Open this snippet in playground

Accéder à une diapositive spécifique

Si vous définissez une méthode pour l'attribut on d'un élément sur tap:carousel-id.goToSlide(index=N), le carrousel ayant l'identifiant "carousel-id" passe à la diapositive suivante à index=N lorsque l'utilisateur appuie ou clique sur un élément (la première diapositive se situe à index=0, la deuxième à index=1 et ainsi de suite).

L'exemple suivant illustre un carrousel de trois images, sous lequel sont disposés des boutons d'aperçu. Lorsqu'un utilisateur clique sur l'un des boutons, l'élément de carrousel correspondant s'affiche.

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="/static/inline-examples/images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
    <amp-img src="/static/inline-examples/images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
    <amp-img src="/static/inline-examples/images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
  </amp-carousel>
  <div class="carousel-preview">
    <button on="tap:carousel-with-preview.goToSlide(index=0)">
      <amp-img src="/static/inline-examples/images/image1.jpg"
        width="60"
        height="40"
        alt="apples"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      <amp-img src="/static/inline-examples/images/image2.jpg"
        width="60"
        height="40"
        alt="lemons"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      <amp-img src="/static/inline-examples/images/image3.jpg"
        width="60"
        height="40"
        alt="blueberries"></amp-img>
    </button>
  </div>
Open this snippet in playground

Attributs

# Application d'un style
type Indique le type d'affichage des éléments du carrousel :
  • carousel (type par défaut) : toutes les diapositives sont affichées et l'utilisateur peut les faire défiler horizontalement. Ce type n'accepte que les mises en page suivantes : fixed, fixed-height et nodisplay.
  • slides : affiche une seule diapositive à la fois. Ce type accepte les mises en page suivantes : fill, fixed, fixed-height, flex-item, nodisplay et responsive.
height (obligatoire) Indique la hauteur du carrousel, en pixels.
controls (facultatif) Affiche les flèches gauche et droite de manière permanente pour permettre à l'utilisateur de parcourir les éléments du carrousel sur des appareils mobiles. Par défaut, les flèches de navigation disparaissent au bout de quelques secondes sur l'écran du mobile. La visibilité des flèches peut également être contrôlée en appliquant un style, et une requête média peut être utilisée pour n'afficher les flèches qu'à certaines largeurs d'écran. Sur un ordinateur, les flèches sont toujours affichées, sauf si un seul élément enfant est présent.
data-next-button-aria-label (facultatif) Définit le libellé ARIA du bouton amp-carousel-button-next. Si aucune valeur n'est indiquée, le libellé ARIA est défini par défaut sur "Next item in carousel" (Élément suivant dans le carrousel).
data-prev-button-aria-label (facultatif) Définit le libellé ARIA du bouton amp-carousel-button-prev. Si aucune valeur n'est indiquée, le libellé ARIA est défini par défaut sur "Previous item in carousel" (Élément précédent dans le carrousel).
data-button-count-format (facultatif) Chaîne de format sous la forme (%s of %s), utilisée comme suffixe du libellé ARIA pour amp-carousel-button-next/amp-carousel-button-prev. Cet attribut fournit aux utilisateurs d'un lecteur d'écran des informations sur leur progression dans le carrousel. Si aucune valeur n'est indiquée, la valeur par défaut est "(%s of %s)".
autoplay (facultatif) Passe à la diapositive suivante sans intervention de l'utilisateur.
Si cet attribut est renseigné sans valeur :
  • Par défaut, le carrousel change de diapositive toutes les 5 000 millisecondes (5 secondes) ; cet intervalle peut être modifié à l'aide de l'attribut delay.
  • Le cas échéant, l'attribut loop est associé à amp-carousel.
  • Au moins deux diapositives sont nécessaires pour que la lecture automatique puisse avoir lieu.
  • L'attribut s'applique uniquement aux carrousels dont le paramètre est type=slides.
Si cet attribut est renseigné avec une valeur :
  • Le cas échéant, l'attribut loop est associé à amp-carousel.
  • L'attribut loop est supprimé une fois que le nombre requis de boucles a été effectué.
delay (facultatif) Définit le délai avant le passage à la diapositive suivante, en millisecondes, lorsque l'attribut autoplay est activé. L'attribut delay s'applique uniquement aux carrousels dont le paramètre est type=slides.
loop (facultatif) Permet à l'utilisateur d'aller au-delà du premier ou du dernier élément. Le carrousel doit contenir au moins trois diapositives pour que la lecture en boucle soit effectuée. L'attribut loop s'applique uniquement aux carrousels dont le paramètre est type=slides. Exemple : Affiche un carrousel de diapositives avec les attributs "controls", "looping" et "autoplay" différé.
wzxhzdk:2
Open this snippet in playground
common attributes Cet élément inclut des attributs communs étendus aux composants AMP.
  • Vous pouvez utiliser le sélecteur d'éléments amp-carousel pour appliquer un style librement.
  • Vous pouvez utiliser le sélecteur de classes .amp-carousel-slide pour cibler des éléments du carrousel.
  • L'état visuel d'un bouton amp-carousel désactivé est masqué.
  • Par défaut, .amp-carousel-button utilise une image SVG intégrée comme image de fond pour les boutons. Vous pouvez remplacer cette image par votre propre image ou fichier SVG, comme dans l'exemple ci-dessous.

Exemple : Image SVG intégrée .amp-carousel-button par défaut

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

Exemple : Remplacement de l'image SVG intégrée .amp-carousel-button par défaut

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}

Validation

Consultez les règles relatives à amp-carousel dans les spécifications du validateur AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub