RoyalSlider

28 jQuery + CSS3 Slider, Carousels und Accordions

In vielen Web-Projekten werden so genannte Slider verwendet, meist zur platzsparenden und effektvollen Präsentation von Inhalten wie z.B. Bannern, Produkten oder auch anderen multimedialen Inhalten. Ich habe einmal einige der schönsten und nützlichsten Slider, Accordions und Carousels auf Basis von jQuery oder/und CSS3 zusammen gefasst.

Skitter jQuery Slider

Skitter beherrst eine Unmenge an verschiedenen Optionen und Effekten, die kaum Wünsche offen lassen. Passend zum Slider wird auch ein entsprechendes WordPress Plugin angeboten.

An HTML5 Slideshow w/ Canvas & jQuery (demo)

Diese Lösung nutzt das neue HTML5 Canvas Element, um so mittels einer per Javascript in Kontrast und Farben modifizierten Version der Bilder einen schönen Überblend-Effekt zu erreichen.

Nivo Slider (demo)

Wohl einer der bekanntesten und beliebtesten Slider ist der Nivo Slider. Über 800.000 Downloads sprechen für sich! Auch hier ist ein entsprechendes WordPress Plugin verfügbar.

Coin Slider

Der Coin Slider ist ein leichtgewichtiger Slider (nur 8kb groß), der alle gängigen und auch ältere Browser, sowie Iphone und Android unterstützt.

CU3ER

Der vor allem durch seine markanten 3D-Effekte bekannte CU3ER Slider ist inziwschenzusätzlich zur Flash- auch in einer jQuery Variante verfügbar und unterstützt somit auch mobile Geräte, wie z.B. Smartphones und Tablets. CU3ER beherscht eine Vielzahl an 2D und 3D Effekten, bietet eine eigene Web-Oberfläche zur Gestaltung der Slider (den cManager), viele verschiedene Templates, Indikatoren, usw.

Auch hier sind WordPress und Joomla Plugins verfügbar.

Galleria

Das unter der MIT Licenz veröffentlichte Javascript Image Gallery auf Basis von jQuery kann mittels Themes angepasst und gestaltet werden.

jQuery uSlider plugin

Der recht schlanke uSlider lässt den den Besucher wie in einem Buch blättern.

RoyalSlider Touch-Enabled jQuery Image Gallery (demo)

Der RoyalSlider bietet neben den verschiedenen Formen Banner Rotator, Image Gallery, Content Slider und 2 Mini-Banner erweiterte Funktionen für mobile Geräte. So wird die Touch und Slide Funktion auf IOS, Androit, sowie anderen Smartphones und Tablets unterstützt. Er bietet die verschiedensten Fade- und Slide-Effekte, Captions inklusive HTML Tags (z.B. H1, H2, usw. für SEO), HTML-Inhalte im Slider selbst, eine ausführliche Dokumentation und vieles mehr…

jQuery Image Scale Carousel

Das besondere an diesem Slider ist die Skalierung der Bilder. Das heißt, das jQuery Script passt die Größe der Bilder an die Maße des Sliders an. Die Seitenverhältnisse der Bilder bleiben dabei erhalten. Das pixelgenaue Zurechtschneiden der Bilder entfällt somit. Das macht den Slider ganz nützlich für automatisch eingefügte oder User-generierte Inhalte.

jCoverflip (demo)

Ein Carousel im Apple Style zur Darstellung von Bildern oder auch anderen Inhalten, wie z.B. Produkten. Sowohl Klick auf die einzelnen Items, wie auch eine Scrollbar können zum Umschalten der Inhalte genutzt werden. Anzahl der Items, Fonts, Farben, Größen usw. sind problemlos anpassbar. Zusätzlich zum Script wird ein Drupal Plugin angeboten.

FLEXSLIDER an awesome, fully responsive jQuery slider plugin.

Der FlexSlider kann die verschiedensten HTML-Inhalte fassen und ist durch seine “Responsive Webdesign” Funktionen wie geschaffen für modernes Webdesign. Neben den gewohnten horizontalen, sind auch vertikale Slides möglich. Der Slider ist mit einer Vielzahl von Optionen sehr einfach konfigurierbar und unterstützt sämtliche aktuellen Browser. Auch Captions und diverse Fade-Effekte sind natürlich enthalten. Was will man mehr?

Rotating Image Slideshow w/ CSS3 and jQuery (demo)

Der Titel lässt es schon fasst erahnen – ein Slider mit einem rotierendem Effekt beim Bildwechsel.

Flux Slider (demo)

Neben einer Unmenge an tollen 2D-Effekten bringt der jQuery und CSS3 basierte Flux Slider auch diverse 3D-Effekte mit. Seht selbst: Flux Slider Transitions Gallery

Craftyslide

Nur schlappe 2kb groß ist das jQuery Script für den Craftyslide jQuery Slider. Noch schlanker geht es nun wirklich nicht…

zAccordion (demo)

Wirklich gelungen finde ich auch das zAccordion – einfach zu integrieren, massig Optionen und sieht einfach toll aus!

Automatic Image Slider w/ CSS & jQuery (demo)

Diese beliebte Lösung stammt von Soh Tanaka, dem bekannten Webdesigner und Frontend-Entwickler aus Los Angeles.

Diapo

Noch eine tolle jQuery Gallerie mit massenhaft Effekten und Optionen. Auch hier werden wieder mobile Geräte unterstützt.

Circular Content Carousel with jQuery (demo)

Ideal zur Darstellung von Produkten, zum Beispiel in Online Shops würde ich dieses jQuery Carousel befinden.

Basic jQuery Slider

Estro – jQuery Ken Burns & swipe effect slider (demo)

Langsam und gefühlvoll zoomt dieser Slider in oder aus den einzelnen Bildern. Der SEO optimierte Estro Slider basiert auf HTML5 und jQuery und enthält sogar YouTube und Vimeo Player. Mobile Geräte wie z.B. das iPhone oder iPad werden unterstützt. Der Slider bringt 4 verschiedene Skins mit und ist mit vielen Optionen an die eigenen Wünsche anpassbar.

Elastislide  – A Responsive jQuery Carousel Plugin (demo)

Der Name lässt es erahnen – Elastislide ist insbesondere für das Responsive Webdesign gedacht und passt sich somit problemlos an die unterschiedlichsten Fenster- bzw. Browserbreitan an.

Easy Paginate (demo)

Ein jQuery Carousel, welches die Inhalte seitenweise wechselt.

Rotating Image Slider with jQuery (demo)

Einen netten “rotierenden” Effekt, der mich ein wenig an ein offenes Spielkartenblatt erinnert, bringt dieses Carousel mit.

bxSlider (demo)

Nicht immer müssen es die komplizierten und ausgefallenen Effekte sein. Wunderbar schlank und einfach – und damit für so manches Projekt geeignet ist der bxSlider.

Awkward Showcase (demo)

Mit seinen Fullscreen- und Thumbnail-Funktionen könnte dieser Slider für so manches Portfolio genau das Richtige sein.

Slides, a Slideshow Plugin for jQuery

Ein einfaches und schlankes jQuery Slideshow Plugin – einfach zu intgrieren und per CSS und HTML problemlos anzupassen.

Slidorion (demo)

Das besondere an diesem Plugin ist die Mischung zwischen Slider und Accordion. So ist es perfekt geeignet um Text und Bilder übersichtlich zugleich anzuzeigen.

jQuery Timeliner (demo)

Für so genannte Timelines – also die Darstellung von Geschichtsdaten (z.B. die Firmengeschichte oder einen Lebenslauf) ist dieses jQuery Plugin konzipiert. Möglich ist sowohl horizontale wie auch eine vertikale Darstellung und auch an einen Autoplay wurde gedacht.

Na, war da etwas für euch dabei? Mit welchen Slidern arbeitet ihr am liebsten? Welche Plugins könnt ihr empfehlen?

Divi WordPress Theme

Ein Kommentar zu “28 jQuery + CSS3 Slider, Carousels und Accordions”

Hinterlassen sie einen Kommentar

XHTML: Folgende HTML-Tags können verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>