Kostenloses Slideshow Script ohne Schnickschnack
Weniger als 4kB. Kein jQuery & Co.
An Slideshows, Content- oder Imageslidern, rotierendem Bildwechsel und ähnlichen Dingen kommt man kaum noch vorbei, weil man möglicht viel sagen und dabei wenig Platz einnehmen will. Dabei entstehen aber leider oft einige typische Probleme:
- Häufig leidet die Übersichtlichkeit und Bedienbarkeit. Wenn Slides (gern unstoppbar) durchlaufen, ohne dass man eine Ahnung hat, wie viele es sind und zu schnell, um den Inhalt zu lesen, dann leidet der Benutzer: Eine statische Ausgabe wäre die bessere und weniger ärgerliche Wahl.
- Die meisten Lösungen setzen auf Frameworks wie jQuery und anderen auf. Das ist zwar kein Verbrechen, aber nur für ein paar wechselnde Bilder umfangreiche Ressourcen zusätzlich zu laden, ist nicht die beste Lösung hinsichtlich der Ladezeit.
Es gibt zwar bereits zahlreiche schlanke Lösungen wie z. B. den Javascript Image Slider - No jQuery bei menucool.com, die auf solche Bibliotheken verzichten und dadurch eine Menge Dateigröße einsparen. Dennoch wird üblicherweise auch dort noch eine gewisse Menge an Code in Bildwechseleffekte investiert, Grafik eingesetzt etc.
Beschreibung
So ist mit dem kleinen "4kB-Slider" die folgende Lösung entstanden, die aus einer minimalen Menge an CSS (ca. 1kB) und JavaScript (unminimiert < 3kB) besteht, den Bildwechsel mit CSS Transitions löst und die Navigation grafikfrei umsetzt. Speziell auf Seiten, bei denen man besonderen Wert auf schnelle Ladezeiten gelegt wird wie z. B. einer Landingpage für eine Marketingkampagne, auf der eine Slideshow einzelne Vorteile eines Produkts anpreisen soll, ist ein kleines Slider-Script wie dieses hier vollkommen ausreichend und kostet kaum Ressourcen.
Eine Navigation zum Wechsel der Bilder wird automatisch erzeugt oder kann wahlweise manuell hinzugefügt (Beispiele dazu siehe unten) und dabei mit individuellen Ankertexten versehen, beliebig platziert oder formatiert werden... man muss es aber eben nicht, wenn man es nicht will. Für die Benutzung können Scriptcode - und vor allem die CSS-Anweisungen - wahlweise direkt in die nutzende Seite kopiert werden (wenn man das Script z. B. nur auf der Startseite nutzt) oder man bindet den JavaScript-Code als externen Verweis (es muss nicht im head sein) ein und ist mit einem Container und den darim platzierten Bildern nebst einer Zeile Code zum Start auch schon fertig. Hilfe zur "Installation" und Anpassung finden sich in den Beispielen im Downloadpaket oder weiter unten direkt hier auf der Seite.
Ein Beispiel
Das folgende Beispiel nutzt bei statcounter.com abrufbare Grafiken zur Entwicklung der Browserlandschaft in Deutschland zwischen 2011 und 2013.
Download 4kB Slideshow-Script
Das Script darf beliebig frei eingesetzt werden, es müssen (aber dürfen natürlich gern :)) auch keine Links gesetzt werden o. Ä. Den Hinweis auf die Quelle im Kopf des Scripts zu erhalten, kostet aber kaum Ladezeit und ist daher durchaus erwünscht.
Version 2.3.0.1 vom 28.01.2014
Kurzanleitung
Wer sich nicht durch die ganzen Details quälen will, aber mit den Beispieldateien allein nicht zurechtkommt, kann sich an die folgende Anleitung halten:
Wer es genauer wissen will, findet in der folgenden Anleitung mehr zu Funktionsweise, Einbau, Anpassung und Grenzen des Scripts.
Details zum Einbau und Einsatz
Wenngleich (oder gerade weil) der "4kB-Slider" sehr leichtgewichtig ist, sind ein paar Konventionen zu beachten und wie bei jeder Lösung entweder ein paar Ergänzungen an der nutzenden Seite zu machen oder CSS- und JavaScript-Dateien auf dem Server abzulegen / zu ergänzen und zur Verwendung des Sliders zu laden.
CSS-Design
Zur Funktion benötigt der "4kB-Slider" einige CSS-Anweisungen, die man zwar in sein normales CSS übernehmen kann, aber sicher nicht muss, wenn man sowieso nur einen Slider auf einer einzigen Seite benötigt. In diesem Fall ist es sinnvoll, die Anweisungen in den head-Bereich der nutzenden Seite zu implementieren (wenn möglich - so macht es auch die Beispielseite im Downloadpaket) oder direkt (z. B. in einem CMS) in der HTML-Ansicht der Seite zusammen mit den Links auf die anzuzeigenden Bilder "im Content" einzufügen. Das tut der Funktion keinen Abbruch, wenngleich es dem Puristen vermutlich gegen den Strich gehen wird.
Hier der dazu erforderliche CSS-Code:
Ein Großteil ist für die Bildübergänge verantwortlich, aber dennoch kann und sollte an einigen Stellen Einfluss auf die Optik genommen werden - dazu finden sich weiter unten ein paar Beispiele.
JavaScript
So ganz ohne Script geht es freilich nicht. Der folgende Code ist bewusst in lesbarer Form belassen worden, kann aber im Echteinsatz noch einmal minimiert werden. Man kann auch diesen wie das CSS als Block einfach in die Seite übernehmen und den unten beschriebenen Aufruf direkt daran anschließen... oder wie im unten stehenden Beispiel (und auch auf dieser Seite) das Script auf dem Server ablegen und bei Bedarf laden (siehe Aufruf im nächsten Abschnitt).
Das komplette Script:
Inhalte (Bilder oder Content) definieren
Der "4kB-Slider" ist für Bilder gedacht, kann aber durchaus auch für beliebige div-Container verwendet werden, die z. B. Bild und Text gemischt beinhalten. Idealerweise haben die Inhalte aber übereinstimmende Dimensionen... oder sind zumindest gleich hoch, denn ohne Anpassungen erscheint die Navigation unten links - bezogen auf das erste Bild bzw. den ersten Inhaltscontainer. Für einen Einbau "von der Stange" reicht neben CSS und Javascript z. B. folgender Block, um drei Bilder wechselnd anzuzeigen, die bei einem Klick auf eine bestimmte Seite führen:
<div class="gms_sliderbox">
<div id="gms_slider_sl1" class="gms_slider_default">
<a href="seite1.html"><img class="gms_sliderimg" src="image1.jpg" alt="Bild 1" /></a></div>
<div id="gms_slider_sl2" class="gms_slider_offstage">
<a href="seite2.html"><img class="gms_sliderimg" src="image2.jpg" alt="Bild 2" /></a></div>
<div id="gms_slider_sl3" class="gms_slider_offstage">
<a href="seite3.html"><img class="gms_sliderimg" src="image3.jpg" alt="Bild 3" /></a></div>
</div>
Die eingesetzten Klassen für den umfassenden Container und die Container, die die Inhalte (hier Links und Bilder) enthalten, sind zwingend erforderlich, damit das Script alles andere hinzufügen kann, was für den Bildwechsel, den Stop der Slideshow bei Klick auf einen Container (wenn die Inhalte z. B. keinen Link beinhalten) u. a. benötigt wird. Für die Navigation wird ebenfalls ein zusätzliches Element per Script an der im Design definierten Stelle hinzugefügt.
Der Start des Scripts
Zur Nutzung muss das Script - wenn es als eigene Datei auf dem Server ablegegt wird - nach der Definition des Blocks mit den Inhalten und dem CSS-Design geladen oder vor dem Aufruf in den folgenden Block übernommen werden, der zum Start des "4kB-Sliders" in den Seitenquelltext eingefügt wird. Das kann übrigens auch ganz am Ende der Seite geschehen:
<script type="text/javascript" src"gms_slider_v2.js"></script>
<script type="text/javascript">gmsSliderInit(3000);</script>
Die Angabe 3000 in gmsSliderInit(3000) sorgt für den Start des Bildwechsels in einer Frequenz von ca. 3 Sekunden. Dieser Wert kann beim Aufruf auf der eigenen Site je nach Umfang der wechselnden Inhalte angepasst werden. Wird eine "0" übergeben, erscheint nur die Navigation und der Slider wird initialisiert, ohne dass ein automatischer Bildwechsel erfolgt.
Einfache Beispielseite anzeigen (in neuem Tab)
Ein paar denkbare Anpassungen
Navigation: Für alle Wünsche hinsichtlich abweichender Gestaltung muss das CSS-Design für den Navigationscontainer #gms_slider_nav angepasst werden. Das obige Beispiel auf dieser Seite läßt diesen z. B. mit einer passenden Angabe für left an die gewünschte Stelle rücken und auch die "Standardfarben" für den aktiven Menüpunkt der Navigation wurden geändert.
Inhalt: Es dürfen auch mehr als 3 Bilder bzw. beliebige HTML-Inhalte (siehe unten) sein. Wichtig ist nur, dass das erste über die zugeordnete Klasse gms_slider_default als sichtbar definiert wird, denn alle anderen sollen für den Fall, dass ein Besucher ohne JavaScript daherkommt, ausgeblendet bleiben. Wer dieses Verhalten ändern will, so dass alle beinhalteten Bilder oder Contentblöcke dann sichtbar sind, läßt bei den weiteren Containern die Klasse gms_slider_offstage einfach weg. Auch ist es erforderlich, dass es keine Lücken gibt. Wer 8 Slides hat, braucht gms_slider_sl1 bis gms_slider_sl8. Sollte z. B. der Container gms_slider_sl6 gelöscht werden, müssen die folgenden Container umbenannt werden, um die lückelnlose Reihenfolge wiederherzustellen.
Sliderbox anpassen: Es ist kein Problem, den Hauptcontainer mit zusätzlichem CSS "aufzuübschen". Eine feste Breite bzw. Höhe oder im Rahmen eines Responsige Designs dynamisch (inkl. der beinhalteten Bilder oder Inhalte) angepasste Dimensionen sind auch keine Hürden.
Übergang: Da das Script nur CSS statt einer Auswahl verschiedener Übergänge per JavaScript beinhaltet, ist hier nur wenig zu verändern. Wer aber die Dauer des Bildübergangs ändern will, kann im CSS nach "1.7s" suchen - das ist die Dauer der beiden gegenläufigen Transitionseffekte des erscheinenden neuen und zeitgleich verschwindenden alten Bilds. Der Wert steht für die beliebig länger oder kürzer gestaltbaren "1,7 Sekunden", die dieser Vorgang derzeit dauert.
Optionale eigene Navigation
Soll etwas anderes als "1, 2, 3" etc. in der Navigation erscheinen, kann diese auch direkt innerhalb des Sliderbox - Containers im Code selbst manuell angelegt und mit individuellen Titeln werden; z. B für den Fall, dass es vier Slides gibt, die die folgenden Themen behandeln und auch so benannt werden sollen:
<ul id="gms_slider_nav">
<li id="gms_slider_li1" class="">Aktuelles Angebot</li>
<li id="gms_slider_li2" class="">Unser Topseller</li>
<li id="gms_slider_li3" class="">Gewinnspiel</li>
<li id="gms_slider_li4" class="">Das Überraschungspaket</li>
</ul>
Beispiel für eigene Navigation anzeigen (in neuem Tab)
Der Rest (die Links) wird später vom Script hinzugefügt. Eine solche eigene Navigation ist auch nicht mehr auf die Platzierung gemäß dem zugehörigen CSS-Design angewiesen und kann z. B. auch außerhalb der "Bühne" platziert werden.
HTML-Content statt Bilder
Innerhalb der Slider-Container können beliebig komplex verschachtelte HTML-Konstruktionen statt einfacher Bilder eingesetzt werden, solange diese von einem weiteren Container umfasst werden, der die Klasse gms_sliderimg besitzen. Das folgende Beispiel zeigt einfache Überschriften und Absätze auf unterschiedlich eingefärbten Hintergrundcontainern als "Bildersatz".
Beispiel mit HTML-Inhalten anzeigen (in neuem Tab)
Einschränkungen
Das Script selbst ist im Code weder schön noch optimal umgesetzt - aber es funktioniert. Auch in älteren Browsern. Wer sich lieber eine Klasse um dem Code friemeln mag, darf das gern jederzeit tun. In dieser Fassung soll es reichen, dass alle Variablen (vor allem die globalen;)), CSS-Klassen und sonstigen Elemente einen "Namensraum" verwenden, der Wechselwirkungen mit anderen Scripts oder bestehenden Designanweisungen ausreichend vermeiden sollte und der mit "gms" für "gandke marketing & software" steht. Das muss man nicht mögen, aber auch nicht unbedingt ändern, solange es noch wichtigere Dinge zu tun gibt. Also nie.
Bekannt ist auch, dass sich die ausgeblendeten Inhalte bei Umsetzung eines Responsive Designs über die Breite der Sliderbox oder eines umgebenden Containers nicht korrekt anpassen, wenn Browserfenstergrößen geändert werden - zumindest im Internet Explorer (wo sonst?). Da dies aber ein eher "konstruierter" Fall ist, der vermutlich mit Geduld und ein paar Anpassungen am CSS angefangen werden kann, bleibt als einziger wesentlicher Punkt das Problem, dass es nur genau einen "4kB-Slider" auf einer Seite geben kann. Mehr benötigt auch mehr Umfang bei Script und Design. Aber diese einfache und kleine Lösung sollte dennoch in den meisten Fällen ausreichen.
Außerdem ist beim Einsatz von CSS Transitions für den Bildübergang unvermeidbar, dass dieser in alten Browsern plötzlich statt "sanft" vor sich geht und verschiednee Elemente nicht überall gleich aussehen. Das sind Schwächen, mit denen man die geringe Größe des Scripts erkaufen muss; trotzdem funktioniert es prinzipiell auch in alten oder exotischen Browsern und erfüllt zumindest seinen Kernzweck.
Feedback und Vorschläge willkommen!
Wer eine verbesserte, nennenswert kleinere oder erweiterte Fassung erstellt hat oder Hinweise zur Verbesserung der Stabilität in verschiedenen Browsern bzw. sonstige Kommentare loswerden will, erreicht mich über das Kontaktformular, per Mail, auf Google+ und überhaupt auch sonstwo - ich freue mich über Konstruktives. Oder im Zweifelsfall auch einfach simples Lob ;)
Viel Erfolg beim Einsatz, schnelle Ladezeiten und natürlich...
Viele Conversions!