Content- Slider erstellen

Ich habe heute ein wenig an meiner Portfolio- Seite gearbeitet. Beim angestrebten Design ist ein Content- Slider gewünscht.

Wer jetzt zuerst einmal nicht weiss, was das ist, kein Problem:

Content- Slider sorgen dafür, dass ein Content A durch einen Content B mit einer horizontalen oder vertikalen, meist schwungvollen Bewegung abgelöst wird.

Wie immer bei so einer Problemstellung gilt: Hast du es schon mal gesehen, dann hat's auch schon jemand gemacht. Ja, und natürlich gibt es auch ganz viele Opensource Lösungen dafür. Ich habe einmal mein Suchfeld insofern eingeschränkt, als dass ich eine Lösung auf prototype- Basis wollte. Dieses Framework wird in einem Profolio- Projekt bereits verwendet und ich bin begeistert davon.

Da nun aber die meisten Content- Slider auf einem anderen Framework (jQuery) aufbauen, gestaltete sich die Suche nach einer geeigeneten Lösung leider als relativ Zeitintensiv. Desto mehr ist die gefundene Lösung also auch einen Post in diesem Blog wert. Will ich euch ja schliesslich eure tägliche Arbeit erleichtern…

Wie dem auch sei, ich habe mich für Glider.js entschieden.

Glider.js

Leider ist im Moment irgendetwas mit der Example- Site des Projekts nicht in Ordnung, aber wenn ihr euch die Zip- Datei herunterladet, werden Ihr sehen, dass das ganze prima funktioniert.

Nun aber, wie funktioniert es, und was müsst Ihr tun:

Zuerst einmal müssen die Javascript- Dateien, welche ihr im Zip findet, in eure HTML- Seite eingebaut werden.
Evtl. ist die Reihenfolge noch wichtig:

  1. prototype
  2. effects
  3. glider

Jetzt müsst ihr einen Div- Tag mit der ID "glider" um eure Tags mit eurem Inhalt und Menu setzen. Dem Div- Tag, welcher das Menu beinhaltet muss nun zwingend die Klasse "controls" besitzen. Ähnliches gilt für den Div- Tag, welcher rund um die verschiedenen Contents gesetzt wird. Dieser muss nun die Klasse "content" besitzen. Und jeder einzelne Inhalt, welcher dann via einem Klick auf einen Menupunkt "geslidet" werden soll, bekommt jetzt die Klasse "section". Nun macht Ihr noch einen Div- Tag mit der Klasse "scroller" rund um euren "contents"- Klassen- Div- Tag und schon seid ihr fast fertig.

Falls das jetzt jemand noch nicht so ganz verstanden hat, wovon ich einmal ausgehe. Schaut euch einfach die example.html- Datei im Zip- File an.

 

Jetzt müsst ihr noch bei den Inhalten verschiedene id's setzen und diese dann als Anker- Link beim gewünschten Menupunkt einsetzen.

Das einzige, was jetzt noch gemacht werden muss, ist den "glider" zu initialisieren. Das geschieht recht einfach in einem Javascript- Block.

var my_glider = new Glider('glider', {duration:0.5});

Wenn Ihr nun alles genauso umgesetzt habt, sollte das mit dem sliden schon klappen. Vorausgesetzt ist jetzt natürlich noch die richtige Formatierung.

Wenn ihr einen vertikalen Slider basteln wollt, dann solltet ihr das Width- Property der Scroller- Klasse auf 100% setzen. Wenn Ihr nun dem ersten Inhalt das left- Property 0% und dem zweiten Inhalt das left- Property 100% gebt. Na, was passiert dann? Ganz genau: Der zweite Inhalt kommt von rechts reingedonnert. Also genau den Effekt, welchen wir erzielen wollten.

 

Viel Spass beim ausprobieren!