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 Bildbreite sowie ein "Image ratio" für den Slider angegeben werden. In diesen Behälter können dann beliebig viele "Carousel slides" (Inhaltselement t3sb_carousel) eingebunden werden. Hier hast Du die Option für einen "vertical swift", wenn im Carousel-Container "Image ratio" angegeben wurde.

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;
}