Die Komponente "amp-carousel"

Hinweis: Diese Komponente kann nur in AMPHTML-Anzeigen verwendet werden.

Mit der Komponente amp-carousel können Sie eine karussellähnliche Galerie für mehrere Bilder erstellen. Das Erscheinungsbild und Verhalten des Karussells können Sie anpassen, indem Sie seine Eigenschaften ändern.

Ein Beispiel für das Rendering der Komponente amp-carousel

So verwenden Sie die Komponente amp-carousel in Ihrem Projekt:

1. Öffnen Sie den Bereich Komponenten und dann den Ordner Galerien.

2. Ziehen Sie die Komponente amp-carousel  in den Anzeigebereich.

3. Gehen Sie im Bereich Eigenschaften zu den Eigenschaften für amp-carousel und geben Sie im Feld Name einen Namen für die Komponente ein.

4. Fügen Sie im Feld Bilder der Galerie mit einer der folgenden Methoden Bilder hinzu:

   • Klicken Sie auf die Schaltfläche Galeriebilder auswählen . Klicken Sie auf Bilder auswählen, um nach Bilddateien zu suchen, oder ziehen Sie Dateien direkt in das Dialogfeld.
   • Geben Sie die URLs für Ihre Bilder durch Kommas getrennt ein.

5. Optional können Sie die Komponenteneigenschaften wie unten beschrieben nach Belieben anpassen.

Codeansicht

In der Codeansicht werden Bilder aus der Eigenschaft Bilder von der Komponente amp-carousel im speziellen Google Web Designer-Attribut images aufgelistet und nicht als untergeordnete Elemente angezeigt. Ansonsten sollte der Quellcode für die Komponente der offiziellen Spezifikation entsprechen. Die veröffentlichte Datei muss die Spezifikation vollständig erfüllen.

So ordnen Sie Bilder im Karussell neu an oder entfernen sie:

1. Gehen Sie im Bereich Eigenschaften zu den amp-carousel-Eigenschaften und klicken Sie auf die Schaltfläche Galeriebilder auswählen . Ein Dialogfeld mit einer Liste von Bildern im Karussell wird geöffnet.
2. Ziehen Sie ein Bild an eine andere Position, um es neu anzuordnen, oder bewegen Sie den Mauszeiger auf ein Bild und klicken Sie auf Löschen , um es aus dem Karussell zu entfernen.
3. Klicken Sie auf OK.

Eigenschaften

Im Eigenschaftenfenster können Sie die Darstellung und das Verhalten der Komponente amp-carousel verändern.

Eigenschaft	Beschreibung
Name	Der amp-carousel-Name
Bilder	URLs der Bilder, die im Karussell angezeigt werden sollen
Typ	Der Anzeigetyp: Karussell: Alle in einem fortlaufenden Band dargestellten Folien können horizontal bewegt werden. Folien: Es wird immer nur eine Folie auf einmal dargestellt.
Autom. Wiedergabe	Nur verfügbar, wenn als Typ Folien eingestellt ist Aktivieren Sie dieses Kästchen, um ohne Benutzerinteraktion automatisch zum nächsten Bild im Karussell zu wechseln. Für die automatische Wiedergabe müssen mindestens drei Folien vorhanden sein.
Verzögerung	Nur verfügbar, wenn als Typ Folien eingestellt ist und Autom. Wiedergabe aktiviert ist. Das Zeitintervall in Millisekunden, bevor zur nächsten Folie gewechselt wird. Die Standardverzögerung beträgt 5.000 Millisekunden (5 Sekunden).
Steuerelemente anzeigen	Setzen Sie bei diesem Kästchen ein Häkchen, um Links- und Rechtspfeile zu aktivieren. Über diese können Nutzer dann Karussellelemente auf Mobilgeräten bedienen. Auf Desktop-Computern werden bei Karussells mit mehreren Objekten immer Pfeile angezeigt.
Schleife	Nur verfügbar, wenn als Typ Folien eingestellt ist. Setzen Sie bei diesem Kästchen ein Häkchen, wenn Sie möchten, dass Nutzer nach der ersten oder letzten Folie wieder zur jeweils nächsten Folie gelangen. Das Karussell fährt dann mit der Bilderreihe fort. Für eine Schleife müssen mindestens drei Folien vorhanden sein.

Ereignisse und Aktionen

Ereignisse, die mit der Komponente "amp-carousel" gesendet werden

Sie können basierend auf den folgenden Ereignissen der Komponente "amp-carousel" andere Aktionen auslösen:

Ereignis	Beschreibung
Folienwechsel	Wird gesendet, wenn sich die angezeigte Folie ändert

Wenn Sie eines dieser Ereignisse im Dialogfeld Ereignis auswählen möchten, legen Sie die Komponente "amp-carousel" als Ziel fest.

Aktionen, die von der Komponente "amp-carousel" ausgeführt werden

Folgende Aktionen der Komponente "amp-carousel" können als Reaktion auf andere Ereignisse ausgelöst werden:

Aktion	Konfigurationsoptionen
Zur Folie wechseln	Index: Die Folie, die angezeigt werden soll, wobei "0" für die erste Folie steht

Wenn Sie eine dieser Aktionen im Dialogfeld Ereignis auswählen möchten, legen Sie die Komponente "amp-carousel" als Empfänger fest.

Hier erfahren Sie, wie Sie Ereignisse konfigurieren können.

Vorschau

Für diese Komponente ist in der Google Web Designer-Oberfläche keine Vorschau möglich. Wenn Sie die Komponente in Aktion sehen möchten, erstellen Sie eine Vorschau des Dokuments in Ihrem bevorzugten Browser. Klicken Sie hierzu in der rechten oberen Ecke auf die Schaltfläche Vorschau .