jQuery Karussell Slider

Ihr habt einen Shop und möchtet eure Produkte ansprechend präsentieren? Oder Ihr möchtet eine Geschichte mit Bildern erzählen? Ihr sucht einfach einen Slider der die Rotationsbewegung eines Karussells nachempfindet? Der jQuery basierte Slider eignet sich für all das und wirkt am besten mit freigestellten Bildern.

In diesem Tutorial erkläre ich, wie Ihr mit jQuery einen Slider programmiert, der sich „wie ein Karussell bewegt“. Der Slider simuliert einen Drehung, einen 3D-Effekt. Die mittlere Einheit wird größer und die äußeren Einheiten kleiner dargestellt.

Das Tutorial – so funktioniert der Karussell Slider

Der jQuery Karussell Slider basiert auf den Grundtechnologien HTML, CSS und JavaScript. Inhalte fügen wir zunächst in HTML ein und sorgen für eine semantisch sinnvolle Struktur. Das Design (Farben, Größen, Positionen der einzelnen Elemente) und die flüssigen Bewegunsabläufe realisieren wir per CSS. Mit JavaScript machen wir Klick-Abfragen auf die Vor- und Zurück-Pfeile und weisen den Slides dynamisch Klassen zu. Dies bringt die Drehbewegung ins Karussell. Wie das ganze im Detail funktioniert, könnt Ihr in den folgenden Abschnitten lesen.

Das HTML-Gerüst
CSS – Formatierung, Rotation und weiche Übergänge
JavaScript für Klick-Abfragen und Berechnungen
Wie kann ich den Slider in meiner Seite nutzen?

Inhalte und Struktur für den Karussell Slider – das HTML-Gerüst

Zunächst legen wir das Grundgerüst an.

Wie zu erkennen gibt es den Container .cslider-carousel für die Slides (auch: Einheiten) und den Container .cslider-controls. In letzterem befinden sich zwei weitere Container, die als Kontrollfelder (Navigationspfeile) für vor und zurück dienen. Der ganze Code ist im Container mit der Klasse .cslider eingefasst.

<div class="cslider">
    <div class="cslider-carousel">
        <!-- Einheiten -->
    </div>
    <div class="cslider-controls">
        <div class="cslider-prev"></div>
        <div class="cslider-next"></div>
    </div>
</div>

Der Code für einen Slide wird im Container .cslider-item eingefasst und sieht folgendermaßen aus.

<div class="cslider-item">
    <a href="https://html-mania.de/">
        <img src="assets/img/600x600.png" alt="Slider Image" />
        <div class="cslider-text">
            <h3>Lorem Ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
        </div>
    </a>
</div>

Der Code ist ein Vorschlag. So stelle ich mir das Markup für eine mögliche Produkt-Präsentation vor.
Ihr könnt das nach euren Vorstellungen anpassen und gerne auch Ergänzungen vornehmen.

Der Code für den Slide wird nun im Container .cslider-carousel eingefügt. Um den rotierenden Slider gleichmässig auszustatten, sollten mindestens 5 Einheiten angelegt werden.

<div class="cslider">
    <div class="cslider-carousel">
        <!-- Einheit 1 -->
        <div class="cslider-item">
            <a href="https://html-mania.de/">
                <img src="assets/img/600x600.png" alt="Slider Image" />
                <div class="cslider-text">
                    <h3>Lorem Ipsum</h3>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing...</p>
                </div>
            </a>
        </div>
        <!-- Einheit 2 -->
        ...
    </div>
    <div class="cslider-controls">
        <div class="cslider-prev"></div>
        <div class="cslider-next"></div>
    </div>
</div>

Damit steht unser HTML Markup und wir können uns mit der Erstellung des Stylesheets dem nächsten Schritt widmen.

CSS – Formatierung, Rotation und weiche Übergänge

Wir starten mit ein paar grundlegenden Dingen und geben dem » 3D-Slider « als Hintergrund einen radialen Farbverlauf. Die Texte erhalten eine passende Kontrastfarbe und die Bildskalierung wird auf das Maximum der verfügbaren Breite (in einem Slide) gesetzt.

.cslider {
    background: radial-gradient(#85c6ef, #166fa6);
    color: #fff;
    padding: 40px 20px;
    position: relative;
}
.cslider img {
    height: auto;
    max-width: 100%;
    width: 100%;
}
.cslider h3,
.cslider a {
    color: #fff;
}

Das Karussell

Der Container .cslider-carousel bekommt eine feste Höhe. Je nach Szenario empfehle ich die maximale Breite über den Parameter max-width etwas niedriger zu setzen als den Rest des Inhaltes. Über die Zuweisung von display: flex und align-items: center erzielen wir eine vertikale Zentrierung entlang der Y-Achse.

jQuery Karussell mit Einheiten, die entlang der Y-Achse zentriert sind

.cslider-carousel {
    align-items: center;
    display: flex;
    height: 475px;
    margin: 0 auto;
    max-width: 1400px;
    padding-bottom: 210px;
    position: relative;
    z-index: 1;
}

Die Slides im jQuery Karussell Slider

Die Einheiten in unserem » Carousel « können mehrere Stati annehmen, über welche wir die verschiedenen Formatierungen (Größe, Ausrichtung, Animationsverhalten) realisieren. Als Basis erhalten alle Slides die Klasse .cslider-item und damit eine absolute Positionierung. Wir nutzen den Opacity-Parameter mit dem Wert 0 um die Deckkraft auf transparent zu stellen. Als Breite geben wir den Wert 10% an. Für die Positionierung auf der X-Achse definieren wir den Wert left: 20%. Beide Prozentangaben verhalten sich relativ zur Größe des Karussell-Container.

Die Rotation und weitere Bewegungen werden durch das dynamische ändern der Klassen erreicht (siehe: JavaScript). Folgende Klassen werden den Einheiten im Wechsel zugeorndet:

.cslider-item-selected
Die mittlere (fokussierte) Einheit
.cslider-item-previous, .cslider-item-next
Die Einheiten links und rechts neben der mittleren
.cslider-item-first, .cslider-item-last
Die äußeren Einheiten

Eine ansprechende Darstellung auf Tablets, Smartphones und Desktops bescheren uns die vorhandenen Breakpoints.

.cslider-item {
    left: 20%;
    opacity: 0;
    position: absolute;
    text-align: center;
    transform: translate(-50%, 0);
    transition: opacity 150ms ease-in-out, width 300ms ease-in-out, transform 300ms ease-in-out, left 300ms ease-in-out;
    width: 10%;
    z-index: 0;
}
@media (min-width: 1200px) {
    .cslider-item {
        left: 5%;
    }
}
.cslider-item img {
    height: auto;
    max-height: 315px;
    max-width: 100%;
    width: auto;
}

.cslider-item-selected {
    opacity: 1;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all 300ms ease-in-out, transform 300ms cubic-bezier(0.25, 0.75, 1, 1);
    z-index: 2;
}
@media (min-width: 768px) {
    .cslider-item-selected {
        transition: all 300ms ease-in-out;
    }
}
@media (max-width: 575px) {
    .cslider-item-selected {
        width: 50%;
    }
}
@media (min-width: 576px) {
    .cslider-item-selected {
        width: 40%;
    }
}

.cslider-item-previous,
.cslider-item-next {
    opacity: 1;
    transition: all 300ms ease-in-out;
    width: 20%;
    z-index: 1;
}

.cslider-item-first,
.cslider-item-last {
    opacity: 1;
    transition: opacity 150ms ease-in-out 300ms, width 300ms ease-in-out, transform 300ms ease-in-out, left 300ms ease-in-out;
    width: 10%;
}

@media (max-width: 575px) {
    .cslider-item-previous,
.cslider-item-next {
        opacity: 0;
    }
}

@media (max-width: 1519px) {
    .cslider-item-first,
    .cslider-item-last {
        opacity: 0;
    }
}

.cslider-item-previous {
    left: 20%;
}

.cslider-item-next {
    left: 80%;
}

.cslider-item-first {
    left: 20%;
}
@media (min-width: 1520px) {
    .cslider-item-first {
        left: 5%;
    }
}

.cslider-item-last {
    left: 80%;
}
@media (min-width: 1520px) {
    .cslider-item-last {
        left: 95%;
    }
}

CSS für den Text-Container

Um Text im jQuery Karussell Slider anzuzeigen gibt es den Container mit der Klasse .cslider-text. Im Normal-Zustand ist der „Text-Container“ verborgen. Dies geschieht über die Werte height: 0 und opacity: 0. Damit kein Text über den Container hinausragt definieren wir den Parameter overflow als hidden. Damit Text im mittleren Container sichtbar wird, weisen wir (über die Klasse .cslider-item-selected) die Wert height: 210px und opacity: 1 zu. Eine flüssige Animation zwischen den zwei Zuständen wird über den Parameter transition angewiesen.

.cslider-text {
    height: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    transition: height 0ms ease-in-out 300ms, opacity 225ms ease-in-out;
    right: 0;
}

.cslider-item-selected .cslider-text {
    height: 210px;
    opacity: 1;
    transition: height 0ms, opacity 300ms ease-in-out 300ms;
}

Aussehen und Ausrichtung der Vor- und Zurück Pfeile

Für die Pfeile definieren wir ein quadratischen Container mit identischen Seitenlängen (width und height). Den weißen Rand rechts und unten erhält der Container über den Wert border-width: 0 4px 4px 0. Mittels transform: rotate(x/y) drehen wir den Container .cslider-prev in die eine und .cslider-next in die andere Richtung.

Vor und zurück Pfeile mit CSS — Quadratischer Container mit Rahmen rechts und unten wird durch Rotation zum Pfeil.

.cslider-prev,
.cslider-next {
    border-color: #fff;
    border-style: solid;
    border-width: 0 4px 4px 0;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 28px;
    margin-top: -14px;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    width: 28px;
    z-index: 2;
}

.cslider-prev {
    transform: rotate(135deg);
    left: 20px;
}

jQuery Code für den Karussell Slider

Zunächst erstellen wir die JavaScript Funktion cSlider(). Darin wählen wir mit jQuery den Container .cslider und speichern diesen in der Variable $carousel. Wir prüfen per if-Abfrage die Verfügbarkeit eines Sliders auf der Seite.

function cSlider() {
    'use strict';

    var $carousel = jQuery('.cslider');

    if ($carousel.length > 0) {
        // Variablen
        // Funktionen
        // Kontrollfelder
        // Starte Slider
    }
}

Mit jQuery wählen wir die Einheiten des Sliders und speichern diese als Variable $carouselItem. Das gleiche machen wir mit den Vor- und Zurück-Pfeilen ($prev und $next). Wir lesen die Anzahl der Slides in unserem 3D-Karussell aus und weisen das Ergebnis der Variable itemLength zu. Die Variable index dient als Zähler.

// Variablen
var $carouselItem = $carousel.find('.cslider-item'),
    $prev = $carousel.find('.cslider-prev'),
    $next = $carousel.find('.cslider-next'),
    itemLength = $carouselItem.length,
    index = 0;

Kontrollfelder für Vor und Zurück

Wir machen eine Klick-Abfrage auf die Vor- und Zurück-Pfeile. Mit jedem Klick auf vor wird die Zählervariable (index) um 1 erhöht. Damit die Zählervariable nicht ins unermessliche steigen kann, wird ein Abgleich mit der Anzahl der Slides gemacht und die Variable wird ggf. auf 0 gesetzt.

Beim Klick auf zurück ändert sich die Abfolge ein wenig. Damit der Zähler nicht ins Negative fallen kann, wird ein Abgleich mit 0 gemacht und der Zähler nimmt ggf. die Zahl der Slides an. Die Reduktion um 1 findet im Anschluss statt.

Zum Abschluss beider Abfragen wird die Funktion setState() mit Übergabe des aktuellen Zähler-Wertes aufgerufen.

// Kontrollfelder
$next.on('click', function() {
    index = index + 1;
    if (index >= itemLength) {
        index = 0;
    }
    setState(index);
});

$prev.on('click', function() {
    if (index <= 0) {
        index = itemLength;
    }
    index = index - 1;
    setState(index);
});

Klassenzuweisungen – Wir versetzen das Karussell in Bewegung

Die Stati der Slides (mittig, außen, groß, klein, versteckt) basieren auf unterschiedlichen Klassen. Die Zuordnung der Klassen übernimmt die Funktion setState(). Zunächst wird ein Reset aller Einheiten auf die Basis-Klasse .cslider-item ausgeführt. Mit der jQuery Methode .eq() wird geziehlt eine Einheit unserer Slides gewählt und mittels .addClass() wird eine der Klassen hinzugefügt. Welcher Slide welche Klasse erhält wird in der Funktion setIndex() ermittelt.

setIndex() berechnet eine Position innerhalb des Intervals zwischen der Untergrenze (0) und der Obergrenze (Anzahl der Einheiten/itemLength). Hierfür werden die Werte i und add genutzt. Wert i entspricht der Zählervariable (index). Wert add ist ein Additionswert der mit 0 beginnt und pro Einheit um 1 erhöht wird. Die Funktion gibt die Summe aus i und add aus. Ist die Summe größer als die Obergrenze wird der Überschuss auf 0 addiert und als Ergebnis ausgegeben.

// Funktionen
function setIndex(i, add) {
    if (i + add >= itemLength) {
        return i + add - itemLength;
    } else {
        return i + add;
    }
}

function setState(i) {

    // Reset der Klassen
    $carouselItem.attr('class', 'cslider-item')

    // Zuweisung der Klassen
    $carouselItem.eq(setIndex(i, 0)).addClass('cslider-item-first');
    $carouselItem.eq(setIndex(i, 1)).addClass('cslider-item-previous');
    $carouselItem.eq(setIndex(i, 2)).addClass('cslider-item-selected');
    $carouselItem.eq(setIndex(i, 3)).addClass('cslider-item-next');
    $carouselItem.eq(setIndex(i, 4)).addClass('cslider-item-last');
}