Kostenlose HTML5 Sliders: Nur Schieben … und drücken

Man kann sich kaum eine Website ohne Bildslider vorstellen. Dank der Slider-Funktionalität kann man ins Quadrat, das in 1/10 vom visuellen Teil des Bildschirms liegt, die ganze Info reinstecken. Zum Beispiel, die Slider-Größe der Templatemonster.com Website ist 573*185px.
Meine 2. Bildauflösung ist 1280*1024px, der Banner liegt in 1/12 des Bildschirms, im Slider gibt es 9 Slides … und wenn wir den Slider löschen würden und die ganze Infos auf der Startseite platzieren würden, wäre sie doppelt größer als jetzt – das geht nicht.

Bildsliders sind die wunderbare Design-Elementen. Außer dem Ausmaß bieten die Sliders viele Übergangseffekten an. Hast du irgendwann über einen Skitter Slider gehört? Er bieten 36 Übergangseffekten an: cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, random, randomSmart.

Obwohl der Skitter zum jQuery Slider gehört und zu dieser RoundUp eigentlich nicht passt, will ich ihn hier trotzdem als ein gutes Beispiel nennen.

***

Liquid Slider

Der Liquid Slider verwendet CSS3 Übergänge mit jQuery Animationen als Fallbacks. Du kannst jeden gewünschten HTML Inhalt verwenden. Jeden. Die Navigation wird sich selbst herum bauen und der Slider wird sich an Bildschirmgröße anpassen.

***

BlogSlideShow

BlogSlideShow ist ein leichter Slider mit verschiedenen Effekten (auch CSS3/HTML5).

***

HTML5 Slideshow w/ Canvas & jQuery

***

iView Slider


iView Slider ist ein Responsive jQuery Slider Plugin mit 35 Übergangseffekten. Man kann hier entweder Bilder, oder HTML oder Video reinsetzen.

***

Сontent Slider mit jCarousel

In diesem Slider findet man: initial Intro Block, Control-Buttons zur Navigation durch die Sliders, Sliders und Carousel mit Bilder (Minibilder) auf dem Button.

***

Image Slider using jQuery and CSS3

In manchen Templates verwenden wir den “Nivo Slider jQuery Script”, weil er sehr mächtig und kostenlos ist. Der Script hat 16 Übergangseffekten. Er ist leicht zu bedienen und hat viele tolle Funktionen.

***

WOW Slider

WOW Slider ist eine perfekte Option für nicht-Coders. WOW Slider ist ein responsive Slider mit einer Menge Übergangseffekten ( Rotate, Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical und Basic linear).

***

SCHWEIGE DOCH NICHT! Wie gefällt dir die oben angegebene Sliders? Falls Du die andere passende Sliders kennst/verwendest, lass und darüber wissen.


Nataly Ohlsen

Ist Expertin auf dem Gebiet Content-Marketing bei TemplateMonster. Nataly auf Facebook.