Ich zeige Ihnen heute, wie Sie für Ihre Website mit einfachen Mitteln Ihre eigene Slideshow auf Basis von JavaScript und CSS erstellen können.
Der Vorteil meiner Lösung liegt darin, dass sich der gesamten Code (CSS, JavaScript und HTML) gleich an die Stelle kopieren lässt, an der später die Slideshow erscheinen soll. Es ist also nicht notwendig, den Quelltext der Webpage an mehreren Positionen zu ändern.
Außerdem verzichte ich bewusst auf die Einbindung externer Frameworks oder Funktionsbibliotheken von Drittanbietern, sondern nutze allein CSS und JavaScript für die Realisierung.
Codemäßig setzt sich die Slideshow aus drei Teilen zusammen:
- CSS für die Darstellung und Animation
- HTML zur Einbindung der Grafiken an Ort und Stelle
- JavaScript zur Steuerung der Elemente
Eingebettet wird der Quelltext am besten in einem <div>-Element. Dieses können Sie mit CSS Ihren Wünschen entsprechend optisch dem Layout der Website anpassen.
Ein fix und fertiges Projekt zum Herunterladen finden Sie am Ende dieses Tutorials.
Vorbereitungen
Was ist das Wichtigste bei einer Slideshow? Richtig, die Bilder.
Während das verwendete Format der Grafikdateien keine Rolle spielt, sollten die einzelnen Bilder dieselben Abmessungen besitzen. Sie müssen also eventuell vorab mit einem Grafikprogramm die Größen der Fotos angleichen (z.B. schneiden, verkleinern/vergrößern).
Sie können problemlos JPG, PNG, GIF und alle anderen Dateiformate mischen. Auch das von Browsern unterstützte Vektorformat SVG ist einsetzbar.
Der Quelltext im Detail – CSS
<style>
.ofaSlideshowElements {display: none;}
.ofaSlideshowAnimation {position: relative; animation: ofaSlideshowAnimation 10s;}
@keyframes ofaSlideshowAnimation {
0% {opacity: 0;}
20% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
</style>Die Klasse .ofaSlideshowElements wird allen Bildern zugeordnet, die in der Slideshow erscheinen sollen. Da wir immer nur ein Bild zur gleichen Zeit anzeigen (sonst macht die Slideshow ja wenig Sinn), sind die Elemente dieser Klasse per Default unsichtbar („display: none;“).
Die Klasse .ofaSlideshowAnimation enthält die Angaben zur Steuerung der Animation. Ich verwende hier sogenannte CSS-Keyframes-Animationen, die im folgenden über eine @keyframes-Regel definiert werden.
Jedes Schlüsselbild (keyframe) nimmt Einfluss auf den weiteren Verlauf der Animation; die Prozentangabe steht dabei für den Zeitpunkt innerhalb der Animation. Da wir eine Zeitspanne von 10 Sekunden für die gesamte Animation festgelegt haben, teilen sich die Schritte wie folgt ein:
- 0 bis 2 Sekunden: Das Bild wird eingeblendet (die Deckkraft steigert sich von 0 auf 1).
- 2 bis 9 Sekunden: Das Bild bleibt sichtbar (Deckkraft bleibt konstant bei 1).
- 9 bis 10 Sekunden: Das Bild wird ausgeblendet (die Deckkraft verringert sich von 1 auf 0).
Der Quelltext im Detail – HTML
Nachdem das CSS steht, ist als nächstes der Code für die Bilder an der Reihe:
<img class="ofaSlideshowElements ofaSlideshowAnimation" src="https://www.14all-magazin.com/cms/wp-content/uploads/2017/12/DigitalLifestyle.svg" style="cursor:pointer; width:300px;" onclick="window.open('https://www.digitallifestyle-magazin.com','_blank')">
<img class="ofaSlideshowElements ofaSlideshowAnimation" src="https://www.14all-magazin.com/cms/wp-content/uploads/2017/12/Veggie-Tobi.svg" style="cursor:pointer; width:300px;" onclick="window.open('https://www.veggietobi.de','_blank')">
<img class="ofaSlideshowElements ofaSlideshowAnimation" src="https://www.14all-magazin.com/cms/wp-content/uploads/2017/08/14All.svg" style="cursor:pointer; width:300px;" onclick="window.open('https://www.14all-magazin.com','_blank')">
Jedem Bild werden die zuvor definierten Klassen zugewiesen. Es ist also von Haus aus unsichtbar.
Mit der Style-Anweisung „cursor:pointer;“ stellen wir sicher, dass sich der Mauszeiger beim Überfahren des Bildes in die typische „Klick-Hand“ verwandelt (das machen leider nicht alle Webbrowser von allein).
Der onclick-Event öffnet die hinterlegte URL bei Mausklick auf das Bild in einem neuen Fenster bzw. Tab („_blank“). Falls die Bilder Ihrer Slideshow nicht anklickbar sein sollen, entfernen Sie diesen Event (und auch die Style-Anweisung für den Mauszeiger).
Tipp: Um unterschiedliche Bildgrößen auszugleichen, können Sie die Höhe und Breite als CSS-Stil festlegen. Bedenken Sie aber, dass dies unter Umständen die Darstellung der Inhalte ziemlich verzerrt.
Der Quelltext im Detail – JavaScript
Sind alle Bilder definiert, folgt das Herz der Animation – die Steuerung mittels JavaScript:
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("ofaSlideshowElements");
for (i = 0; i < x.length; i++) { x[i].style.display = "none"; }
myIndex++;
if (myIndex > x.length) {myIndex = 1};
x[myIndex-1].style.display = "block";
setTimeout(carousel, 10000);
}
</script>
So funktioniert es:
Die Variable x enthält ein Array aus allen Elementen der Klasse .ofaSlideshowElements (also den Bildern). Ein Array ist vergleichbar mit einer durchnummerierten Liste, beginnend beim Index 0.
Das Array wird in einer For-Next-Schleife abgearbeitet und für jedes Bild die Eigenschaft „display“ auf den Wert „none“ (unsichtbar) gesetzt.
Die Zählvariable myIndex speichert die Position des anzuzeigenden Bildes im Array. Bei jedem Durchlauf der Funktion carousel() erhöht sich ihr Wert um eins. Und da sie außerhalb der Funktion deklariert wurde, bleibt ihr Wert auch nach Beendigung der Funktion carousel() erhalten.
Im folgenden prüft eine Wenn-Dann-Bedingung, ob myIndex bereits größer als die Anzahl der für die Slideshow bestimmten Bilder ist und setzt deren Wert in diesem Fall zurück auf 1 (damit beginnt die Slideshow wieder von vorne).
Nun wird das Bild an der Position myIndex-1 sichtbar gemacht, indem die Eigenschaft „display“ den Wert „block“ zugewiesen bekommt.
Damit die Funktion carousel() in einer Schleife aufgerufen wird, lassen wir sie mit setTimeout in 10000 Millisekunden (10 Sekunden) erneut ausführen. Das entspricht der im CSS-Code festgelegten Animationsdauer.
Wichtig zu wissen: Möchten Sie die Dauer der Animation ändern, müssen Sie die Zeitangaben sowohl im CSS-Code also auch hier im JavaScript-Code anpassen.
Die fertige Slideshow
Das war’s. So schnell haben Sie Ihre eigene Slideshow erstellt.
Das Ergebnis kann sich sehen lassen:
Download: Beispielprojekt (HTML)
Viel Spaß beim Ausprobieren! 🙂
Autor: Tobias Eichner | Datum der Veröffentlichung: April 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
