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

Un carosello generico per mostrare più contenuti simili lungo un asse orizzontale, progettato per un'ottima flessibilità e prestazioni.

Script obbligatorio <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Layout supportati
  • carosello: fixed, fixed-height e nodisplay.
  • diapositive: fill, fixed, fixed-height, flex-item, nodisplay e responsive.
Esempi AMP By Example:

Comportamento

Ciascuno degli elementi secondari immediati del componente amp-carousel viene considerato un elemento del carosello. Ognuno di questi nodi può avere anche elementi secondari HTML arbitrari.

Il carosello è composto da un numero arbitrario di elementi e da frecce di navigazione per avanzare o tornare indietro di un singolo elemento.

Il carosello passa da un elemento all'altro se l'utente scorre, utilizza le frecce di navigazione o fa clic su una freccia di navigazione facoltativa.

<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

Passare a una diapositiva specifica

Se imposti un metodo per l'attributo on di un elemento su tap:carousel-id.goToSlide(index=N), al tocco o clic dell'utente il carosello con l'ID "carousel-id" avanzerà a index=N, dove la prima diapositiva si trova a index=0, la seconda a index=1 e così via.

Nel seguente esempio, viene mostrato un carosello di tre immagini con in basso dei pulsanti di anteprima. Quando un utente fa clic su uno dei pulsanti, viene visualizzato l'elemento del carosello corrispondente.

<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

Attributi

# Stili
type Specifica il tipo di visualizzazione per gli elementi del carosello, che può essere:
  • carousel(impostazione predefinita): vengono mostrate tutte le diapositive, che possono essere fatte scorrere orizzontalmente. Questo tipo supporta solo i layout `fixed, fixed-height e nodisplay.
  • slides: mostra una sola diapositiva alla volta. Questo tipo supporta i layout fill, fixed, fixed-height, flex-item, nodisplay e responsive.
height (obbligatorio) Specifica l'altezza del carosello in pixel.
controls (facoltativo) Mostra sempre le frecce destra e sinistra per permettere all'utente di navigare tra gli elementi del carosello sui dispositivi mobili. Per impostazione predefinita, le frecce di navigazione scompaiono dopo qualche secondo sui dispositivi mobili. Puoi controllare la visibilità delle frecce anche modificando lo stile e utilizzare una query supporti per mostrare le frecce solo quando lo schermo ha una determinata larghezza. Su computer desktop, le frecce vengono mostrate sempre, a meno che non sia presente un solo elemento secondario.
data-next-button-aria-label (facoltativo) Imposta l'aria-label per amp-carousel-button-next. Se non viene fornito alcun valore, aria-label viene impostata di default su "Elemento successivo del carosello".
data-prev-button-aria-label (facoltativo) Imposta l'aria-label per amp-carousel-button-prev. Se non viene fornito alcun valore, aria-label viene impostata di default su "Elemento precedente del carosello".
data-button-count-format (facoltativo) Una stringa di formattazione che appare come (%s of %s), utilizzata come suffisso dell'aria-label per amp-carousel-button-next/amp-carousel-button-prev. Fornisce informazioni agli utenti che utilizzano uno screen reader per monitorare il loro avanzamento nel carosello. Se non viene fornito alcun valore, quello predefinito è "(%s of %s)".
autoplay (facoltativo) Consente di passare alla diapositiva successiva senza alcuna interazione da parte dell'utente.
Se presente senza un valore:
  • Per impostazione predefinita, fa avanzare una diapositiva in intervalli di 5000 millisecondi (5 secondi); sostituibile dall'attributo delay.
  • Allega l'attributo loop ad amp-carousel se loop non è già presente.
  • Sono necessarie almeno due diapositive per la riproduzione automatica.
  • Si applica solo ai caroselli con type=slides.
Se presente con un valore:
  • Allega l'attributo loop ad amp-carousel se loop non è già presente.
  • Rimuove l'attributo loop dopo che è avvenuto il numero specificato di ripetizioni.
delay (facoltativo) Specifica la durata in millisecondi del ritardo dell'avanzamento alla diapositiva successiva quando è attivo autoplay. L'attributo delay si applica solo ai caroselli con type=slides.
loop (facoltativo) Consente all'utente di avanzare oltre il primo o l'ultimo elemento. Affinché avvenga la ripetizione, devono essere presenti almeno 3 diapositive. L'attributo loop si applica solo ai caroselli con type=slides. Esempio: mostra un carosello di diapositive con controlli, ripetizione e riproduzione automatica ritardata.
wzxhzdk:2
Open this snippet in playground
common attributes Questo elemento include attributi comuni estesi ai componenti AMP.
  • Puoi utilizzare il selettore di elementi amp-carousel per modificare lo stile del carosello.
  • Puoi utilizzare il selettore di classi .amp-carousel-slide per concentrarti su elementi specifici del carosello.
  • Lo stato visivo di un pulsante amp-carousel quando è disattivato è nascosto.
  • Per impostazione predefinita, .amp-carousel-button utilizza un SVG incorporato come immagine di sfondo dei pulsanti. Puoi sostituire questa impostazione con il tuo SVG o immagine, come nell'esempio riportato di seguito.

Esempio: SVG incorporato .amp-carousel-button predefinito

.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>');
}

Esempio: sostituzione dell'SVG incorporato .amp-carousel-button predefinito

.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>');
}

Convalida

Consulta le regole amp-carousel nella specifica dello strumento di convalida AMP.

Serve ancora aiuto?

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