T3S Bootstrap :: Bootstrap Komponente "Carousel"

Carousel

Im Jumbotron mit "Page Media"

Im BE Modul “T3SB Config” unter “Jumbotron” im Tab “Background” kann ein Hintergrundbild bzw. ein Slider (ab 2 Bilder) für den Jumbotron aktiviert werden.

Für die aktuelle Seite:
Das System greift auf die Bilder zu, die direkt in den Seiteneigenschaften der jeweiligen Seite unter dem Reiter „Ressourcen“ (Media) hinterlegt sind.

Vererbung (Slide-Funktion):
Wenn für eine Unterseite keine eigenen Bilder definiert sind, kann die Konfiguration so eingestellt werden, dass die Bilder der übergeordneten Seite „geerbt“ werden.
So erhältst du Hintergründe für ganze Seitenbäume, ohne jedes Bild einzeln zuweisen zu müssen.

Seitenverhältnis (Aspect ratio):
Für das Hintegrundbild bzw. dem Slider kann ein Seitenverhältnis bestimmt werden.

Carousel Settings:
Hier kann das Interval für den Slider gestzt werden weiter gibt es eine Option für “Pause on hover”.

Carousel Container

Der Carousel Container fungiert als Konfigurationszentrale für den gesamten Slider.
Anstatt jedes Bild oder Video einzeln zu skalieren, gibt der Behälter den Rahmen vor.

Zuerst muss ein Carousel-Container im Backend erstellt werden.
In diesen Behälter können dann beliebig viele "Carousel slides" (Inhaltselement t3sb_carousel) eingebunden werden.

Nur Bilder oder Videos (mp4):
Ein klassischer Banner.

Bild mit Caption:
Text-Overlays mit Überschriften und Buttons.

Reiner Text:
Ideal für Testimonials oder Zitat-Slider.

Carousel Container Settings:

max. Image width (required)	Hier muss die max. Sliderbreite (Bidbreite) angegeben werden.	`width`
Image aspect ratio - e.g.: 37:9	Ein festes Seitenverhältnis für alle Slides.	`ratio`
Use image manipulation for mobile view	Um zu schmale Slides zu vermeiden (funktionierte nicht bei Videos).	`mobileNoRatio`
Use Original Image	Es wird das originale Image im Slider angezeigt.	`origImage`
Use Thumbnails as carousel-indicators	Kleine Bilder unter dem Slider anstatt der Carousel-Indikatoren.	`thumbnails`
Switch carousel from horizontal sliding to crossfade	Der Bildwechsel erfolgt durch “crossfade”.	`carouselFade`
Dark variant	Eine dunkle Slider Variante (Navigation & Pagination)	`darkVariant`
Interval	Intervall für den Bildwechsel.	`interval`
Header link	Ein Link im Slider mit dem “Header link”.	`link`
Enable open in lightbox	Die Bilder des Sliders können in der Lightbox geöffnet werden.	`zoom`
Indicators also on mobile view	Carousel-Indikatoren auch für die “mobile view”	`mobileIndicators`

Diese Seite hat keinen “Page Container” der Slider erstreckt sich somit über die gesamte Breite des Browserfensters.

Swiper Container

Swiper ist der beliebteste responsible Slider im Internet.
Er wurde mit Fokus auf Leistung, Flexibilität und nativen Touch-Interaktionen entwickelt.

Settings

Slider Style	Default oder 2 custom Slider stehen zur Auswahl.	`sliderStyle`
max. Image width	Hier muss die max. Bidbreite angegeben werden.	`width`
Use Original Image	Es wird das originale Image im Slider angezeigt.	`origImage`
Image ratio - e.g.: 37:9	Image aspect ratio - e.g.: 37:9	Ein festes Seitenverhältnis für alle Slides.
Slides per view	Gleichzeitig sichtbare Slides im Sliders (kann leer sein, wenn Breakpoints verwendet werden)	`slidesPerView`
Slides per view - breakpoint > 10px	Breakpoints für die responsive Darstellung.	`useCustomSwiperJs`
Slides per view - breakpoint > 576px		`breakpoints576`
Slides per view - breakpoint > 768px		`breakpoints768`
Slides per view - breakpoint > 992px		`breakpoints992`
Slides per group	Anzahl der Slides, die als Gruppe sliden.	`slidesPerGroup`
Space between	Abstand zwischen den Slides.	`spaceBetween`
Loop	Die Anzahl der Slides im Loop sollte mindestens dem doppelten Wert von `slidesPerView` entsprechen.	`loop`
Navigation	Navigation kann optional aktiviert werden.	`navigation`
Pagination	Pagination kann optional aktiviert werden.	`pagination`
Autoplay	Startet das sliden des Sliders automatisch.	`autoplay`
Enable open in lightbox	Die Bilder des Sliders können in der Lightbox geöffnet werden.	`zoom`
Custom Swiper JS	Option für Custom Swiper JS für Custom Slider Style.	`useCustomSwiperJs`

Beispiel

Slide one

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Slide two

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Slide three

Slide four

Slide five

Slide six

Slide seven

Slide eight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Slide nine

Inhaltselement "t3sb_carousel"

Das Content Element “t3sb_carousel” kann sowohl im “Carousel Container” als auch im “Swiper Container” genutzt werden!

Hier werden die einzelnen Slides erstellt.

Neben klassischen Bildern können auch Videos (mp4) oder reine Text-Slides integriert werden.

Jede Slide hat eigene Felder für Überschrift, Text und Button-Links, die über das Bild gelegt werden.

Individuelles Cropping:
Dank der im “Container” gewählten "Image ratio" kann der Redakteur im FAL-Editor genau den richtigen Ausschnitt für dieses Format wählen.

Weitere Slider

Card Slider

Infos:

https://getbootstrap.com/docs/5.3/components/carousel/

https://swiperjs.com/