Il componente amp-carousel

Nota: questo componente può essere utilizzato solo negli annunci AMPHTML.

Il componente amp-carousel crea un carousel per mostrare più immagini. Puoi personalizzarne l'aspetto e il comportamento modificandone le proprietà.

Visualizzazione di esempio del componente amp-carousel.

Per utilizzare il componente amp-carousel nel tuo progetto, procedi nel seguente modo:

1. Apri il riquadro Componenti, quindi la cartella Gallerie.

2. Trascina il componente amp-carousel  sullo stage.

3. Nel riquadro Proprietà, cerca la sezione delle proprietà di amp-carusel e inserisci un nome per il componente nel campo Nome.

4. Nel campo Immagini, aggiungi immagini alla galleria utilizzando uno dei seguenti metodi:

   • Fai clic sul pulsante Seleziona immagini della Galleria . Fai clic sul pulsante Scegli immagini per cercare i file delle immagini o trascina direttamente i file nella finestra di dialogo.
   • Inserisci gli URL delle tue immagini, separati da virgole.

5. Se vuoi, modifica le proprietà del componente (fai riferimento alla procedura descritta sotto).

Vista codice

Nella Vista codice, il componente amp-carousel elenca tutte le immagini della proprietà Immagini in un attributo speciale di Google Web Designer, images, anziché includerle come secondarie. Diversamente, il codice sorgente per il componente dovrà seguire le specifiche ufficiali. (Il file pubblicato si atterrà completamente alle specifiche).

Per riordinare o rimuovere le immagini nel carosello:

1. Nella sezione delle proprietà del componente amp-carousel del riquadro Proprietà, fai clic sul pulsante Seleziona immagini della Galleria . Si aprirà una finestra di dialogo con un elenco di immagini nel carosello.
2. Trascina un'immagine nella nuova posizione per cambiarne l'ordine oppure posiziona il puntatore del mouse su un'immagine e fai clic sull'icona Elimina immagine per rimuovere l'immagine dal carosello.
3. Fai clic su OK.

Proprietà

Modifica l'aspetto e il comportamento del componente amp-carousel nel riquadro Proprietà.

Proprietà	Descrizione
Nome	Il nome di amp-carousel.
Immagini	Gli URL delle immagini da mostrare nel carousel.
Tipo	Tipo di visualizzazione: carousel: tutte le diapositive vengono visualizzate in una striscia ininterrotta con scorrimento orizzontale. diapositive: viene mostrata una singola diapositiva alla volta.
Riproduzione automatica	Si applica solo quando il tipo è impostato su diapositive. Seleziona questa casella per passare automaticamente all'immagine successiva del carousel senza interazione da parte dell'utente. Affinché si verifichi la riproduzione automatica, il carousel deve essere composto da un minimo di tre diapositive.
Ritardo	Si applica solo quando il tipo è impostato su diapositive ed è attiva la riproduzione automatica. Intervallo di tempo in millisecondi prima di passare alla diapositiva successiva. Il ritardo predefinito è di 5000 millisecondi (5 secondi).
Mostra controlli	Seleziona questa casella per visualizzare le frecce sinistra e destra per consentire all'utente di spostarsi tra gli elementi del carousel sui dispositivi mobili. Sui computer desktop, le frecce vengono sempre mostrate per i carousel con più elementi.
Loop	Si applica solo quando il tipo è impostato su diapositive. Seleziona questa casella per consentire l'avanzamento dopo la prima diapositiva o dopo quella finale. Il carousel ripeterà il giro ripartendo dall'estremità opposta. Affinché si verifichi il loop, devono esserci almeno tre diapositive.

Eventi e azioni

Eventi inviati dal componente amp-carousel

Puoi attivare altre azioni basate sui seguenti eventi del componente amp-carousel:

Evento	Descrizione
Cambio diapositiva	Viene inviato quando cambia la diapositiva mostrata.

Per selezionare uno di questi eventi nella finestra di dialogo Eventi, imposta il componente amp-carousel come target.

Azioni eseguite dal componente amp-carousel

Le seguenti azioni del componente amp-carousel possono essere attivate in risposta ad altri eventi:

Azione	Opzioni di configurazione
Vai alla diapositiva	Indice: diapositiva su cui si vuole andare; 0 indica la prima diapositiva.

Se selezioni una di queste azioni nella finestra di dialogo Eventi, imposta il componente amp-carousel come destinatario.

Scopri come configurare gli eventi.

Anteprima

Non è possibile visualizzare in anteprima questo componente nell'interfaccia di Google Web Designer. Per vedere il componente in azione, visualizza l'anteprima del documento nel tuo browser preferito facendo clic sul pulsante Anteprima nell'angolo in alto a destra.