Simpler Div Slider mit jQuery

13.09.2010 19:09 Gregor Panek jQuery 0

Es gibt für jQuery eine Menge verschiedener Slider. Die Umsetzungen sind unterschiedlich, genauso deren Funktionsumfang. Für mein Portfolio war ich auf der suche nach einem simplen jQuery Slider. Die im Web sich befindlichen Slider waren für meine Anforderungen immer zu komplex und umständlich umgesetzt. Deswegen möchte ich hier meine eigene Interpretation eines Simplen Div Sliders mittels jQuery vorstellen.

Einführung

Bevor ich meine eigene Umsetzung eines Simplen Div Sliders angegangen bin, hatte ich bereits einen Slider namens "Movingboxes" in die Webseite implementiert. Der Slider kam meiner Anforderung sehr nahe und wurde von mir nur etwas angepasst. Nach einigen Tests bemerkte ich das er auf dem Google Chrome Browser nicht anständig funktioniert. Auch die gesamte Umsetzung des Sliders war nicht befriedigend, vor allem die HTML Struktur war zu sehr aufgebläht. Deswegen entschloss ich mich meinen eigenen Slider zu entwickeln, der eine einfache HTML Struktur sowie auch einen unkomplizierten jQuery Code besitzen sollte.

Voraus- und Umsetzung

Für die Benutzung des Simple Div Sliders wird jQuery sowie jQueryUI benötig. Bei jQueryUI ist darauf zu achten das die zwei Pakete UI Core und Effects enthalten sind.

HTML

...
<body>
     <img src="images/leftarrow.png" id="leftarrow" alt="leftarrow"/>
     <div class="slider">

     <div class="active">
         <img src="images/1.jpg" />
     </div>
     <div>
         <img src="images/2.jpg" />
     </div>

     <div>
         <img src="images/3.jpg" />
     </div>

     <div>
         <img src="images/4.jpg" />
     </div>

     <div>
         <img src="images/5.jpg" />
     </div>
     </div>
         <img src="images/rightarrow.png" id="rightarrow" alt="rightarrow"/>
 </body>
 ...

Die HTML Struktur ist bei diesem Slider sehr einfach gehalten. Vor dem Div mit der Klasse Slider setzt man die Grafik mit dem Pfeil nach links, nach dem Div die Grafik mit dem Pfeil nach rechts. Innerhalb des Div's Slider werden einzelne Div's erstellt, die für genau ein Slideobjekt stehen. Was sich innerhalb dieser Divs's befindet bleibt dem Benutzer überlassen. Hier ist es nur eine Grafik. Das Startobjekt, welches beim Aufrufen der Seite als erstes erscheint wird über die Klasse active festgelegt.

CSS

 #leftarrow{
     float:left;
     cursor:pointer;
 }

 #rightarrow{
     margin:10px;
     cursor:pointer;
 }

 .slider{
 float:left;
 }

Die Stylesheet angaben halten sich auch hier in Grenzen. Wichtig sind die Angaben für das floating, damit die Pfeile für das sliden links und rechts vom Inhalt erscheinen. Da es sich bei den Pfeilen um Grafiken handelt und in der HTML Struktur kein Link-Tag auftritt, muss man den Grafiken den Wert cursor:pointer; zuweisen, damit sich der Mauszeiger wie bei einem Link verhält.

Javascript - jQuery

 /*
 * Script programmed and developed by
 * © Gregor Panek 2010
 */

 $(document).ready(function(){
 /*
 *Beim starten alle DIV's ausblenden bis auf das mit gesetztem TAG "active"
 */
 $(".slider").children().hide();
 $(".active").show();


 /*
 * Funktion beim Anklicken auf den rechten Pfeil zum weiterschalten auf das
 * nächste DIV
 */
 $("#rightarrow").click(function(event){

     var $current = $(".active"); //Div das active geschaltet ist
     var $next = $current.next(); //folgendes div von active
     var $first = $(".slider :first-child");
     //console.log($first);  #debug
     //console.log($current); #debug
     //console.log($next.length); #debug

     /*
     *Wenn das Ende der Divs erreicht ist, wird das Sliden
     *beendet
     */
     if($next.length != 0){
         $current.removeClass("active");
         $next.addClass("active");
         $current.toggle("slide",{direction:"left"},"medium");
         $next.delay(500).toggle("slide",{direction:"right"},"medium");    
     }


 })//Ende rightarrow Funktion


 $("#leftarrow").click(function(event){
     var $current = $(".active"); //Div das active geschaltet ist
     var $prev = $current.prev(); //folgendes div von active
     var $last = $(".slider :last-child");
     //console.log($first);  #debug
     //console.log($current); #debug
     //console.log($next.length); #debug

     /*
     *Wenn das Ende der Divs erreicht ist funktioniert das 
     *Sliden nicht mehr
     */
     if($prev.length != 0){
         $current.removeClass("active");
         $prev.addClass("active");
         $current.toggle("slide",{direction:"right"},"medium");
         $prev.delay(500).toggle("slide",{direction:"left"},"medium");
     }

 }) //Ende leftarrow Funktion 
 })//Ende document Funktion

Bei der Umsetzung des Sliders werden die Effekte (show,hide,toggle), die von jQuery bereitgestellt werden eingesetzt. In erster Instanz, werden alle Div's bis auf das vorher definierte Aktive ausgeblendet. Beim klicken auf den linken bzw. rechten Pfeil wird ausgehend von der aktiven Div Position auf das nächste, oder vorhergehende Div gewechselt. Hierbei kommt der Effekt toggle zum Einsatz. Außerdem wird noch eine kurze Verzögerung eingebaut, damit beim Wechsel zwischen den Div's sich beide nicht in die Quere kommen und es dadurch zu Verschiebungen kommt.

Den jQuery Quelltext könnte man noch optimieren und versuchen nach dem "DRY-Prinzip (Don't repeat yourself)" zu gestalten.

Zurück

0 Kommentare zu Simpler Div Slider mit jQuery

Kommentar abgeben