Content-Slider
Das Content-Slider-Element kann in einem Artikel als Umschlag-Element Elementtyp › Verschiedenes › Content-Slider angelegt werden. Es können verschiedene Elemente (Bilder, Texte, Teaserbilder, Teaserboxen, etc.) innerhalb des Elements einzeln oder innerhalb einer Elementengruppe zusammen mit anderen Elementen eingefügt werden.
Das Slide-Intervall, die Übergangsgeschwindigkeit, der Slide-Versatz und die Option Kontinuierlich (Dauerschleife) können im Content-Slider-Element eingestellt werden.
Die Slider-Navigation kann mit Eintragung der Klasse .no-nav-slider unter Experteneinstellungen › CSS-Klasse im Content-Slider-Element deaktiviert werden.
Angaben im Contao-Backend für CSS-ID immer ohne vorhergehende Raute #id und CSS-Klassen ohne vorhergehenden Punkt .klasse vornehmen. Mehrere Klassen sind durch ein Leerzeichen zu trennen.
Bilder sollten max. mit einer Datengröße von ca. 2 Megabyte und einer Auflösung von 3840 × 2160 Pixeln in das System hochgeladen werden. Bei der Benennung von Bildern sollten stets Kleinbuchstaben und Zahlen ohne Leer- und Sonderzeichen verwendet werden. Beispiel: mein-bild-001.jpg
Text-Slider (ohne Slider-Navigation)
Beispieltext mit linksbündigem Bild
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.
Beispieltext mit rechtsbündigem Bild mit Großansicht (Colorbox)
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.
Bilder-Slider
Teaserbox-Slider
Slider mit Autoplay looping (ohne Slider-Navigation)
Slider-Einstellungen
Slide-Intervall: 0
Übergangsgeschwindigkeit: 8000
Slide-Versatz: 0
Kontinuierlich: aktiviert
Slider-Code: gem. JSON-Code
CSS-Code
.content-swiper .swiper-wrapper {
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
pointer-events: none;
}JSON-Code
{
"spaceBetween": 14,
"slidesPerView": 2,
"allowTouchMove": false,
"simulateTouch": false,
"autoplay": {
"delay": 0,
"disableOnInteraction": true
},
"freeMode": {
"enabled": true,
"sticky": false
},
"breakpoints": {
"1039": { "slidesPerView": 4 }
}
}