Componente carosello

Il componente Carosello dei componenti core consente all’autore del contenuto di presentare il contenuto in un carosello navigabile.

Utilizzo

Con il componente Carosello, l’autore del contenuto organizza il contenuto in un carosello rotante di diapositive.

La finestra di dialogo di modifica consente all’autore del contenuto di creare, assegnare un nome e ordinare più diapositive, nonché attivare la transizione automatica con ritardo. Utilizzando la finestra di dialogo diprogettazione, l’autore del modello può definire quali componenti possono essere aggiunti al carosello, attivare o disattivare le transizioni automatiche e personalizzare gli stili.

Versione e compatibilità

La versione corrente del componente Carosello è v1, introdotto con la release 2.2.0 dei componenti core a ottobre 2018, ed è descritto in questo documento.

La tabella seguente elenca tutte le versioni supportate del componente, le versioni AEM con cui sono compatibili le versioni del componente e i collegamenti alla documentazione delle versioni precedenti.

Versione componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 Compatibile Compatibile Compatibile

Per ulteriori informazioni sulle versioni e sulle versioni dei componenti core, consulta il documento Versioni dei componenticore.

Output componente di esempio

Per provare il componente Carosello ed esempi delle relative opzioni di configurazione, nonché l’output HTML e JSON, visita la Libreria componenti.

Dettagli tecnici

La documentazione tecnica più recente sul componente Carosello è disponibile su GitHub.

Per ulteriori informazioni sullo sviluppo dei componenti core, consulta la documentazione per lo sviluppatore di componenticore.

Edit Dialog

La finestra di dialogo di modifica consente all’autore del contenuto di aggiungere, rinominare e ridisporre le diapositive nonché di definire le impostazioni di transizione automatica.

Scheda Articoli

Scheda Elementi della finestra di dialogo di modifica del componente Carosello

Usate il pulsante Aggiungi per aprire il selettore dei componenti e scegliere quale componente aggiungere come scheda. Una volta aggiunta, una voce viene aggiunta all'elenco, che contiene le seguenti colonne:

  • Icona - L'icona del tipo di componente della scheda per facilitarne l'identificazione nell'elenco. Passate il puntatore del mouse sopra per visualizzare il nome completo del componente come una descrizione comando.
  • Descrizione - Descrizione utilizzata come testo della scheda, con impostazione predefinita sul nome del componente selezionato per la scheda.
  • Elimina - Toccate o fate clic per eliminare la scheda dal componente Tabulazioni.
  • Riordina - Toccate o fate clic e trascinate per ordinare le schede.
SUGGERIMENTO

Se la vista della pagina viene ridotta e la finestra di dialogo di modifica diventa a schermo intero, il pulsante Aggiungi viene nascosto. Per aggiungere i componenti al componente Carosello, trascinateli dal Browser componenti e trascinateli sul componente Carosello nell’editordi pagina.

Scheda Proprietà

scheda Proprietà della finestra di dialogo di modifica del componente Carosello

Nella scheda Proprietà , l'autore del contenuto può impostare le diapositive per la transizione automatica.

  • Transizione automatica delle diapositive - Quando è attiva, il componente passa automaticamente alla diapositiva successiva dopo un ritardo specificato.
  • Ritardo transizione: quando è selezionata l'opzione Transizione automatica diapositive, questo valore viene utilizzato per definire il ritardo tra le transizioni (in millisecondi).
  • Disattiva pausa automatica al passaggio del mouse : quando si selezionano le diapositive di transizione automatica, la transizione del carosello si interrompe automaticamente ogni volta che il cursore passa sul carosello. Selezionate questa opzione per evitare che la transizione venga messa in pausa.
  • ID - Questa opzione consente di controllare l’identificatore univoco del componente nell’HTML e nel livello dati.
    • Se lasciato vuoto, viene generato automaticamente un ID univoco che può essere trovato esaminando la pagina risultante.
    • Se viene specificato un ID, è responsabilità dell’autore assicurarsi che sia univoco.
    • La modifica dell’ID può avere un impatto su CSS, JS e tracciamento dei livelli di dati.
Nota

I controlli di avanzamento delle diapositive non sono attivati in modalità Modifica . Per interagire con il carosello come lettore del contenuto pubblicato, utilizzate la modalità ​Anteprimao l’opzione Visualizza come pubblicato.

La funzione di avanzamento automatico non è abilitata in modalità Modifica . Usate l’opzione Visualizza come pubblicato​per visualizzare la funzione di avanzamento automatico come lettore del contenuto pubblicato.

Scheda Accessibilità

Scheda Accessibilità della finestra di dialogo di modifica del componente Carosello

Nella scheda Accessibilità , è possibile impostare i valori per le etichette di accessibilità ARIA per il componente.

  • Etichetta - Valore di un attributo etichetta ARIA per il componente

Select Panel

L’autore del contenuto può usare l’opzione Seleziona pannello nella barra degli strumenti del componente per passare a un’altra diapositiva da modificare e per riordinare facilmente l’ordine delle diapositive.

Seleziona l’icona del pannello

Dopo aver selezionato l’opzione Seleziona pannello nella barra degli strumenti del componente, le diapositive configurate vengono visualizzate come un elenco a discesa.

  • L'elenco è ordinato dalla disposizione assegnata delle diapositive e si riflette nella numerazione.
  • Il tipo di componente della diapositiva viene visualizzato per primo, seguito dalla descrizione della diapositiva con il carattere più chiaro.

Seleziona pannello

  • Toccando o facendo clic su una voce nel menu a discesa, passa alla diapositiva la vista nell’editor.
  • La diapositiva può essere riordinata nella stessa posizione utilizzando le maniglie di trascinamento.

Finestra di dialogo Progettazione

La finestra di dialogo di progettazione consente all’autore del modello di definire quali componenti possono essere aggiunti al componente carosello come diapositive, nonché definire le impostazioni predefinite per la transizione automatica e quali stili personalizzati sono disponibili per l’autore del contenuto.

Scheda Proprietà

La scheda Proprietà consente di definire le impostazioni predefinite per le transizioni di diapositiva quando un autore di contenuto aggiunge il componente carosello a una pagina.

Finestra di dialogo Progettazione del componente Carosello

  • Transizione automatica diapositive - Definisce se per impostazione predefinita l’opzione per spostare automaticamente il carosello nella diapositiva successiva è abilitata quando l’autore del contenuto aggiunge il componente carosello a una pagina.
  • Ritardo transizione - Definisce il valore predefinito del ritardo di transizione tra le diapositive (in millisecondi) quando un autore di contenuto aggiunge il componente carosello a una pagina.
  • Disattiva pausa automatica al passaggio del mouse - Definisce se per impostazione predefinita l'opzione per disattivare la pausa automatica delle diapositive è abilitata quando l'autore del contenuto seleziona le diapositive di transizione automatica.

Allowed Components Tab

La scheda Componenti ​consentiti viene utilizzata per definire quali componenti possono essere aggiunti dall’autore del contenuto al componente Carosello come diapositive.

La scheda Componenti consentiti funziona nello stesso modo della scheda con lo stesso nome quando si definisce il criterio e le proprietà di un Contenitore di layout nell'Editor modelli.

Scheda Stili

Il componente Carosello supporta AEM Style System.

In questa pagina