Responsive jQuery Slider sind großartig, um Slide-Effekte in responsive Websites und Templates einzufügen. Wie dieser Artikel zeigt, gibt eine Menge sehr gute und einfache Möglichkeiten, beeindruckende Slideshows für Deine Webprojekte zu realisieren.
Seit 2012 ist Responsive Webdesign das wohl meist diskutierte und heißeste Thema in der Webdesign-Branche. Und es ist auch leicht zu verstehen, warum. Von 2010 bis 2012 sind die deutschen Tablet- und Smartphone-Nutzer von 13 auf 30 Millionen Anwender angestiegen. Diese gewaltige Explosion von Mobilgeräten mit Internetzugang haben Kunden die Frage entlockt, ob ihre Website auch als mobile Version verfügbar ist.
Die Umsetzung einer mobilen Applikation für die Website ist dagegen recht teuer und zudem aufwendiger in der Wartung für die Bereitstellung gleicher Inhalte, das zusätzlich mit Kosten verbunden ist. Die Lösung wurde im Mai 2010 von Ethan Marcotte vorgestellt – Responsive Webdesign.
Heute gibt es tonnenweise von Frameworks zur Erstellung und Erweiterung von responsiven Websites. Ein Beispiel sind jQuery Slider-Plugins, die mobiltaugliche Slideshows auf recht einfache Weise in die Website einbinden lassen.
30 responsive jQuery Slideshows
In diesem Artikel möchte ich Dir 30 kostenfreie Lösungen vorstellen, mit denen Du responsive Slideshows für Deine Website erstellen kannst. Ich hoffe, Du findest die geeignete Lösung für Dein mobiles Webprojket.
1. Responsive Image Slider in jQuery and CSS3
Auf Designmodo wird ein leicht nachvollziehbares Tutorial vorgestellt, mit dem Du mittels CSS3 und jQuery einen mobiltauglichen Bilder-Slider erstellen kannst.
2. Responsive Image Slider in jQuery and CSS3
ResponsiveSlides.js ist ein kleines jQuery-Plugin, das responsive Slider mit Listenelementen ul erzeugt. Es funktioniert in den meisten Browsern, einschließlich aller IE-Versionen von IE6 und höher.
3. PhotoSwipe
PhotoSwipe ist eine kostenlose HTML-,CSS und JavaScript-basierte Bildergalerie speziell für mobile Geräte.
4. FlexSlider
FlexSlider ist ein responsive jQuery Slider, das sich gut für Einsteiger eignet sowie für erfahrene Entwickler, die auf dieses Plugin aufbauen möchten. FlexSlider wurde in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, und IE7+ erfolgreich getestet. iOS und Android-Geräte werden ebenfalls unterstützt. Dieser Slider ist übrigens im Unuk WordPress Theme integriert.
5. Responsive Image Gallery
Bei Codrops wird eine responsive Bildergalerie-Anleitung gezeigt, mit der eine – Inspiriert von Twitters User Galerie – ansprechende responsive Bildergalerie mit Thumbnail-Karussell erstellt werden. Diese Thumbnail-Bildergalerie bietet auch die Möglichkeit, mit der Tastatur zu navigieren.
6. wmuSlider
wmuSlider ist ein responsive jQuery Slider mit Touch-Unterstützung und AJAX Bildergalerie.
7. Sliding Horizontal Parallax
Sliding Horizontal Parallax ist ein responsive CSS3-Slider, der beim Scrollen mehrere Elemente gleichzeitig mit unterschiedlicher Geschwindigkeit bewegt (Parallax-Effekt), um einen 3D-Effekt zu erzeugen.
8. Modern Slide In
Modern Slide In ist ein minimalistischer responsive Slider. Jedes Element gleitet horizontal von rechts auf die Bühne, beim Weiterscrollen blenden die Elemente via Fade-Effekt aus. Die Paginierung wird durch die verkleinerten Elemente dargestellt, die in jedem Frame angezeigt werden.
9. Seamless Responsive Photo Grid
Angenommen, Du hast eine Reihe von Bildern in unterschiedlichen Größen, die Du von Rand zu Rand des Browserfensters ohne Lücken anzeigen möchtest. Dabei sollen die Bilder ihre Seitenverhältnisse beibehalten. Seamless Responsive Photo Grid zeigt, wie es geht.
10. Fotorama
Fotorama ist eine einfache JavaScript Galerie, die sich den jeweiligen Anforderungen des Gerätes anpassen lässt. Von IE 6 bis Safari auf iOS, inklusive Opera und Android werden unterstützt.
11. Galleria
Galleria ist ein JavaScript-Bildergalerie-Framework, das den Prozess der Erstellung beeindruckender Bildergalerien für das Web und mobile Geräte vereinfacht.
12. Blueberry
Blueberry ist ein experimentelles opensource jQuery Bilder-Slideshow- Plugin, das speziell für fluid/responsive Weblayouts geschrieben wurde.
13. SIDEWAYS
SIDEWAYS ist eine einfache und elegante Vollbild-Bildergalerie auf der Basis von jQuery und CSS. Die Fullscreen-Bildergalerie verfügt über verschiedene Modis und benutzerdefinierte Scrollbars.
14. RSlider
Wenn Du kein Programmierer bist und das Rad nicht neu erfinden möchtest, ist RSlider genau das Richtige für Dich. RSlider ist ein responsive Vollbild- und Content-Slider, das durch jQuery angetrieben wird. Mit einem schönen und schlichten Design passt sich dieser Slider automatisch an die Breite des Browserfensters an.
15. SlidesJS
SlidesJS ist ein mobilfähiges jQuery-Diashow-Plugin. Ausgestattet mit einem nützlichen Satz von Funktionen, können Anfänger und Fortgeschrittene Entwickler gleichermaßen elegante und benutzerfreundliche Diashows erstellen. SlidesJS ist mit allen modernen Web-Browsern und jQuery-Versionen 1.4.4+ kompatibel.
16. Thumbnail-Navigation-Galerie
In diesem Tutorial wird die Umsetzung einer beeindruckenden Bildergalerie beschrieben, in der durch bewegliche Thumbnails die Navigation ermöglicht wird. Die Idee ist, ein Menü von Alben zu erstellen, wobei jedes beinhaltete Element in einer offenen horizontalen Thumbnail-Navigationsleiste erscheint, sobald eine Album angeklickt wird. Die Thumbnail-Navigationsleiste bewegt sich dabei automatisch, sobald der Anwender die Maus nach links oder nach recht bewegt.
Sobald ein Vorschaubild angeklickt wird, wird es als Vollbild-Vorschau im Hintergrund der Seite geladen. Es besteht auch die Möglichkeit eines Text-Containers für eines der Menüpunkte.
17. Elastische Bilder-Slideshow mit Thumbnails
In diesem Tutorial wird die Umsetzung einer elastischen Slideshow mit Thumbnail-Vorschau beschrieben, bei der die Slides automatisch den umliegenden Containern angepasst werden. Eine Mischung aus JavaScript- und CSS-Technicken ermöglichen die Mobiltauglichkeit.
18. jQuery Slider Shock
jQuery Slider Shock ist ein responsive jQuery-/WordPress-Slider mit einer Vielzahl an Konfigurationsmöglichkeiten.
19. jmpress.js
jmpress.js ist eine wirklich tolle JavaScript-Bibliothek zur Erstellung von außergewöhnlichen 3D-Präsentationen. Folgende Anleitung zeigt, wie man impress.js nutzt, um eine beeindruckende responsive Slideshow mit 3D-Effekten zu erstellen.
20. Camera
Camera-Slideshow ist ein Open Source Projekt, basierend auf Diapo Diashow (http://www.pixedelic.com/plugins/diapo, wird nicht mehr weiterentwickelt). Camera Slideshow wurde auf neuen Browsern erfolgreich getestet sowie den älteren Internet Explorer-Versionen (8 und 7).
21. RefineSlide
RefineSlide ist ein einfaches jQuery-Plugin für die responsive Anzeige Bild-basierter Inhalte mit CSS-Effekten transition und 3D-transform.
22. Slicebox
Mit den CSS-3D-Transformationen können einige praktische Effekte im dreidimensionalen Raum erstellt werden. Slicebox nutzt diese 3D-Eigenschaften und ermöglicht unterschiedliche Arten von beeindruckenden Effekten. Die Idee hinter Slicebox ist, dreidimensionale Bildschichten zu erstellen, die durch Rotieren das nächste Bild auf der Bildkante zeigt. Falls ein Browser die CSS-3D-Transformationen nicht unterstützt, wird alternativ ein Ein- und Ausblendeffekt angewendet.
23. StackSlider
StackSlider ist ein experimentelles jQuery Bilder-Slideshow-Plugin, das ein anderes, spaßiges Konzept der Thumbnailbetrachtung unter CSS 3D-Transformationen und Dreidimensionalität aufrgreift.
24. Fullscreen Pageflip
In folgender Anleitung geht es darum, ein mobiltaugliches Vollbild-Layout zu erstellen, in dem der Eindruck entsteht, ein Buch zu lesen. Eine linke Sidebar dient als Inhaltsverzeichnis, die verschiedene Seiten enthält. Beim Anklicken eines Eintrages des Inhaltsverzeichnisses, wird der Leser zur entsprechenden Seite springen.
25. iosSlider
iosSlider ist ein jQuery-Plugin, das einen responsive Cross-Browser-Content-Slider leicht in die Webpräsenz integrieren und dafür konfigurieren lässt. Dieses Plugin ist für den Einsatz von Content-Slider, Karussell, scrollbare Website-Banner oder Bildergalerien entwickelt worden.
26. bxSlider
bxSlider ist ein Responsive jQuery Content-Slider.
27. Bounce Slider
Bounce Slider ist ein kleines jQuery-Plugin, das eine einfache Slideshow mit Bildern in ul-Listen erstellt.
28. Basic jQuery Slider
Basic jQuery Slider wurde entwicklet, um so einfach wie möglich zu sein. Es ist auf wesentliche Funktionen mit sauberen semantischem Mark-up reduziert. So kannst Du Basic jQuery Slider mit etwas CSS und JavaScript-Kenntnissen für Deine individuellen Anforderungen erweitern.
29. jQuery Responsive Thumbnail Galerie
jQuery Responsive Thumbnail-Galerie-Plugin.
30. CSS3 Slideshow mit Parallax-Effekt
In diesem Tutorial wird erklärt, wie eine eindrucksvolle Bilder-Slideshow mit Parallax-Effekt durch Hilfe von einigen CSS3-Eigenschaften erstellt wird.
Dank für die tolle Auflistung an Slidern. Den ein oder anderen schau ich mir mal noch genauer an, da ich bisher nur PhotoSwipe im Einsatz hab. Und da ist die Bedingungen am Pc nicht so schön gewesen, wie mit ner Lightbox. Okay ein bisschen am Code an paar Ergänzungen gemacht und dann war es prima… Aber bei solchen Sachen geh ich ungern in den Code.
Super Jonathan- Genau das was ich gesucht habe.
Besonders die Integration von Gesten lässt die Grenzen zwischen App und Website schon stark verschwinden (im Bereich der Usability).
Super Auswahl, danke! Was ich aktuell suche ist ein responsive jQuery Slider, allerdings für Texte und Texte mit Bild. Kennt da jemand was?
Echt coole Auswahl an JQuery-Slidern. Habe mir mal ein paar rausgepickt und werde diese jetzt testen. Danke für die Auflistung!
Gute Zusamenstellung, hat sicher einiges an Zeit “gekostet”. Habe ich etwas übersehen oder fehlt Novo-Slider? Wenn ja, gibt’s Gründe, die gegen diesen Slider sprechen?
Grüsse T. Adam
Ich habe eine eigene Galerie geschrieben, die auch jeder nutzen darf.
Klasse Zusammenstellung. Bei dir hatte ich auch Vertrauen. Brauchte für einen Kunden einen besseren Slider für Bootstrap. Wurde nun die Slicebox 3D.
Danke! Ralf