Carousel

Dieses Feature ist erst ab der 0.1 Theme Version 1.5.0 verfügbar.

Das Carousel basiert auf dem Spectre Carousel und kommt komplett ohne Javascript aus.

Umschlagselemente platzieren

Als erstes wird ein Element vom Typ Umschlag Anfang (Content Slider) und Umschlag Ende benötigt. Bei den Inhaltselementen muss das Template ce_sliderStart_carousel bzw. ce_sliderStop_carousel ausgewählt werden. Im Layout muss das js_slider-Template nicht aktiviert werden.

Umschlag Anfang

Umschlag Stop

Teaserbox-Element platzieren

Innerhalb der Umschlag-Elemente platzierst du ein Element vom Typ Teaserbox (unter Contao Themes). Dem Inhaltselement muss das Template ce_cthemes_teaserbox_carousel zugewiesen werden. Du kannst eine Überschrift, einen Text, Link und ein Bild auswählen. Bei dem Bild muss für die richtige Größe die Bildgröße Carousel ausgewählt werden.

Am Ende sollten die Struktur der Elemente wie folgend aussehen:

Darstellung anpassen

Durch das Hinzufügen von weiteren Klassen kann die Schriftfarbe und das Aussehen des Buttons angepasst werden. Die Einstellungen kannst du im Element Teaserbox unter Erweiterte CSS-Klassen (ganz am Ende) vornehmen.

Um den Button mit schwarzen Hintergrund und weißer Schriftfarbe darzustellen, kannst du unter Button-Style die Klasse .btn-primary auswählen.

Slide-Effekt anpassen

Dieses Feature ist erst ab der 0.1 Theme Version 2.1.0 (Contao 5) bzw. 1.11.0 (Contao 4) verfügbar.

Füge die Klasse fade dem Element vom Typ Umschlag Anfang (Content Slider) hinzu um den Slide-Effekt zu einem Fade-Effekt (Verblassen) zu ändern.

Beispiel