Alle Slider von webdesign weisshart
Zufallsbilder von picsum.photos by Unsplash
Im Laufe der Jahre habe ich eine ganze Reihe von Slideshows vorgestellt. Meist mit den erforderlichen Code-Snippets, manchmal auch mit downloadbaren Demoscripts. Hier eine Übersicht. (Und sollte etwas fehlen: gerne in den Kommentaren …)
Der CSS(-only)-Slider – aufgemotzt
Das Script CSS-only-Slider habe ich mit JavaScript und etwas PHP noch komfortabler gemacht: Der Besucher kann jetzt die Geschwindigkeit der Slideshow einstellen, oder die Animation stoppen, und manuell durch die Bilder scrollen / wischen.
Noch ein CSS-only-Slider
Noch eine Slideshow, gefunden bei De.Web. CSS-only. Und recht hübsch.
Wie alle CSS-Lösungen ist auch diese Slideshow zwar responsive, aber sehr unflexibel, wenn es darum geht, weitere Bilder, ggf. mit unterschiedlichen Abmessungen, hinzuzufügen.
Um auch letzteres zu vereinfachen …
Marquee-Slideshow (mit PhotoSwipe)
Laufschrift ohne Ruckeln, und ohne das deprecated marquee-Tag. Statt dessen mit CSS. Diese Technik eignet sich auch gut für eine Slideshow mit Bildern.
marquee - Laufschrift ohne Ruckeln
Auch eine Art von Slider: Dies ist marquee Laufschrift - aber diesmal valides HTML und CSS, und ruckelfrei in allen Browsern.
Ein Slider nur mit CSS
Ein einfacher Slider mit mehreren Bildern. Mit der Maus oder auf dem Touchpad kann man horizontal durch die Bilder scrollen. Oder, noch eleganter auf Touchscreens, durch einfaches Wischen.
Slick: Karussel Slider
"Slick – the last carousel you'll ever need"
So wird das Slider-Script Slick beworben. Und ich tendiere dazu, dieser Aussage zuzustimmen. Slick ist ein Juwel. Es ist extrem flexibel konfigurierbar, akzeptiert praktisch jeglichen Inhalt für die einzelnen Slides, und erzeugt valides HTML.
Bildvergleich – vorher / nachher
Nicht wirklich eine Slideshow, aber dennoch …
Die Aufgabenstellung: Den Unterschied zwischen zwei Bildern zeigen. Am einfachsten wäre es natürlich, die zwei Bilder nebeneinander zu platzieren, in der Hoffnung, dass klar wird, was sich genau geändert hat. Aber es geht eleganter. TwentyTwenty ist ein jQuery-Plugin, das diese Aufgabe recht elegant, und vor allem responsiv löst.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.