AMP

amp-carousel

Description

Afficher plusieurs éléments de contenu similaires le long d'un axe horizontal.

 

Required Scripts

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

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>
Ouvrir cet extrait dans le 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>
Ouvrir cet extrait dans le playground

Attributs

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é.
<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <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>
Ouvrir cet extrait dans le playground
common attributes Cet élément inclut des attributs communs étendus aux composants AMP.

Application d'un style

  • 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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub