AMP

amp-carousel

Description

Mostra più contenuti simili lungo un asse orizzontale.

 

Required Scripts

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

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>
Apri questo frammento 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>
Apri questo frammento in playground

Attributi

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.
<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>
Apri questo frammento in playground
common attributes Questo elemento include attributi comuni estesi ai componenti AMP.

Stili

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

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub