Kostenlose responsive jQuery-Slider

30 responsive jQuery-Slideshows mit atemberaubenden Effekten

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.


Anzeige

In letzter Zeit 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

responsiveslider

Auf Designmodo wird ein leicht nachvollziehbares Tutorial vorgestellt, mit dem Du mittels CSS3 und jQuery einen mobiltauglichen Bilder-Slider erstellen kannst.


Anzeige

2. Responsive Image Slider in jQuery and CSS3

http://responsive-slides.viljamis.com/

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

PhotoSwipe ist eine kostenlose HTML-,CSS und JavaScript-basierte Bildergalerie speziell für mobile Geräte.

4. FlexSlider

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

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, a jQuery responsive slider

wmuSlider ist ein responsive jQuery Slider mit Touch-Unterstützung und AJAX Bildergalerie.

7. Sliding Horizontal Parallax

Sliding Horizontal Parallax - The Responsive Slider with Advanced CSS3 Transitions

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.


Anzeige

8. Modern Slide In

Modern Slide In - Minimalist Horizontal Sliding Theme

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

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 - a simple, stunning, powerful Javascript gallery.

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 is a JavaScript image gallery framework that simplifies the process of creating beautiful image galleries for the web and mobile devices.

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 is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Blueberry ist ein experimentelles opensource jQuery Bilder-Slideshow- Plugin, das speziell für fluid/responsive Weblayouts geschrieben wurde.

13. SIDEWAYS

SIDEWAYS – jQuery fullscreen Bilder-Galerie.

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

RSlider: Full Screen Responsive jQuery Image and Content Slider

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 a einfaches Slideshow-Plugin für jQuery.

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

Thumbnail-Navigation-Galerie mit jQuery

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

Elastische Bilder-Slideshow mit Thumbnailsy

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: jQuery responsive Slider

jQuery Slider Shock ist ein responsive jQuery-/WordPress-Slider mit einer Vielzahl an Konfigurationsmöglichkeiten.

19. jmpress.js

Slideshow mit 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 - eine kostenlose jQuery-Slideshow

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: ein einfaches jQuery-Plugin

RefineSlide ist ein einfaches jQuery-Plugin für die responsive Anzeige Bild-basierter Inhalte mit CSS-Effekten transition und 3D-transform.

22. Slicebox

Slicebox: 3D Bilder-Slideshow

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: Lustiger 3D Bilder-Slideshow

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

Responsive Fullscreen Pageflip Layout

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 - jQuery Touch Slider Plugin

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: Responsive jQuery Content-Slider

bxSlider ist ein Responsive jQuery Content-Slider.

27. Bounce Slider

Bounce Slider: Einfacher und ansprechender Image Slider mit Beschreibung.

Bounce Slider ist ein kleines jQuery-Plugin, das eine einfache Slideshow mit Bildern in ul-Listen erstellt.

28. Basic jQuery Slider

Basic jQuery Slider - Responsive Slideshow

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

jQuery Responsive Thumbnail-Galerie-Plugin.

30. CSS3 Slideshow mit Parallax-Effekt

Fluide 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.

War dieser Artikel hilfreich? Ja Nein
Jonathan

Hi, ich bin Jonathan Torke, WordPress-Programmierer. Auf pixeltuner.de blogge ich über Webdesign und Social Media. Außerdem teile ich über Twitter täglich frische Ressourcen für Webdesigner und -Entwickler. Du findest mich auch bei Google+, Facebook und deviantART.

7 Antworten auf "30 responsive jQuery-Slideshows mit atemberaubenden Effekten"
  • 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).

  • Martin:

    Super Auswahl, danke! Was ich aktuell suche ist ein responsive jQuery Slider, allerdings für Texte und Texte mit Bild. Kennt da jemand was?

  • Tim Adam:

    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

  • Ralf:

    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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Jetzt das eigene Projekt starten mit den webgo Webhosting Paketen
Anzeige