Carousel

Eine Diashow-Komponente zum animierten Vorführen einer Reihe von Elementen, wie in einem Karussell.

Zuerst muss ein Carousel-Behälter (Raster-Element) im BE erstellt werden. Hier kann die maximale Bildgröße für den Slider angegeben werden. In diesen Behälter können dann beliebig viele "Carousel slides" (Inhaltselement t3sb_carousel) eingebunden werden.

Das Beispiel auf dieser Seite hat keinen "Container" und erstreckt sich somit über die gesamte Breite des Browserfensters.

Wenn "Animate.CSS" in der EM Config aktiviert ist, kann hier der Text animiert werden.

Snippet

Mit folgendem CSS, kann der Text (carousel-caption) vertikal zentriert werden:

.carousel-caption {
    position: absolute;
    top: 20%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    color: #fff;
    text-align: center;
    overflow: hidden;
}