Layer-Slider mit Cycle 2

Wie vermutlich die meisten Webworker habe ich ein Schweizer Armeemesser – eine Auswahl von jQuery-Plugins für bestimmte Einsatzzwecke, die ich immer wieder verwende. Für Slideshows setze ich meistens Cycle 2 von Mike Alsup ein. Cycle 2 ist modular aufgebaut, über Bower installierbar und extrem flexibel einsetzbar. Durch die Möglichkeit, es komplett über data-*-Attribute zu konfigurieren, eignet es sich zudem besonders gut für den Einsatz in CMS-Umgebungen, weil man Optionen rein über das Markup für Redakteure konfigurierbar machen kann, ohne das JS ändern zu müssen.

Cycle 2 bietet vieles, u.a. ist es von Hause aus responsive und hat Plugins, um Carousels damit zu bauen oder die Slideshow über Touch-Gesten zu bedienen. Was es von Hause aus jedoch nicht kann sind die immer noch sehr beliebten „Layer-Slider“, bei denen nicht nur Bilder durchgetauscht werden, sondern zusätzlich Textbausteine oder grafische Elemente zu einer Slide gehören, die nachträglich von einer Seite „hereinfliegen“.

Allerdings beherrscht Cycle 2 grundsätzlich Slides aus mehreren Komponenten – den optischen Effekt eines (einfachen) Layer-Sliders kann man selbst also mit etwas CSS relativ leicht nachrüsten.

Grundgerüst: HTML

Für Slides aus mehreren Bausteinen braucht man etwas mehr als nur ein paar Bilder in einem div-Container. Im Beispiel habe ich für die Slideshow ein aside gewählt, für weitere Slides muss man natürlich das unten vorgegebene Schema des section-Elemente wiederholen.

<aside class="cycle-slideshow" data-cycle-slides="> section">
    <section>
        <h3>Überschrift</h3>
        <span>Untertitel</span>
        <img src="img/bild.jpg" alt="Alternativtext" />
    </section>
</aside>

Über data-cycle-slides gibt man Cycle 2 einen jQuery-Selektor mit, der anstelle des standardmäßigen img-Elementes der Selektor für eine Slide sein soll, in diesem Beispiel also > section.

Positionierung: Basis-CSS

Um die h3- und span-Elemente entsprechend der Vorgabe eines Layer-Sliders auszurichten, müssen sie innerhalb des – von Cycle 2 relativ positionierten – Containers absolut positioniert werden. Für das img, welches als „Quasi-Hintergrundbild“ agieren soll, ist das nicht nötig.

(Der Beispiel-Code ist in SCSS, als Maßeinheit habe ich rem gewählt – geht natürlich genauso mit em.)

.cycle-slideshow {
    section {
        overflow: hidden;
    }

    h3,
    span {
        position: absolute;
    }

    h3 {
        left: 1rem;
        top: 1rem;
    }

    span {
        bottom: 1rem;
        right: 1rem;
    }
}

Diese Styles können über die no-js- und js-Klassen von Modernizr als Fallback dienen, falls JS deaktiviert ist – sie positionieren die Überschrift in der linken oberen und die Unterschrift in der rechten unteren Ecke der Slide.

Animation: Transitions

Im Beispiel soll die Überschrift von links außerhalb und die Unterschrift von unterhalb der Slide „hereinschweben“ (daher auch das overflow: hidden; auf das Container-Element). Eine Möglichkeit, das umzusetzen, sind CSS-Transitions.

Dafür nutzt man die von Cycle 2 bereit gestellte Klasse .cycle-slide-active, da die Animation ja nur auf der jeweils aktiven Slide sichtbar sein muss. Dazu verschiebt man das Element generell jeweils in eine Ausgangsposition außerhalb der Slide, auf der aktiven Slide weist man ihm eine Position innerhalb der Slide zu und für die Übergangsanimation zwischen den Zuständen eine transition.

(Beispiel-Code erneut in SCSS; die für alte Browser notwendigen Vendor-Prefixes für transition habe ich aus Platzgründen ausgelassen.)

h3 {
    .js .cycle-slideshow & {
        left: -20rem;
    }

    .js .cycle-slideshow .cycle-slide-active & {
        left: 1rem;
        transition: left 500ms;
    }
}

span {
    .js .cycle-slideshow & {
        bottom: -10rem;
    }

    .js .cycle-slideshow .cycle-slide-active & {
        bottom: 1rem;
        transition: bottom: 1000ms;
    }
}

Die tatsächlichen Werte für left und bottom muss man ggf. natürlich dem konkreten Inhalt der Elemente anpassen, um eine „saubere“ Animation zu erzeugen, ebenso kann man die Dauer der transition verändern – beide Werte bestimmen zudem den Zeitpunkt, an dem das „Einblenden“ des Elementes erfolgt.

Und was ist mit alten IE?

IE unterstützt CSS-Transitions erst ab Version 10, daher gibt es in diesen Browsern keine Übergangsanimation. Das ist aber kein Problem – die Slideshow wird dennoch funktionieren, sie sieht lediglich etwas weniger schön aus.