jQuery Slider Tutorial – so entwickelt Ihr einen Slider mit JavaScript
jQuery Slider sind aus dem modernen Webdesign nicht mehr wegzudenken. Großer Beliebtheit erfreuen sich Animationen, welche es ermöglichen per Knopfdruck Inhalte in einem festen Bereich von links nach rechts zu schieben.
Im Netz findet man ja bereits eine Vielzahl hervorragender Plugins. Hervorheben möchte ich den easySlider. Dieser kommt in schlichter Aufmachung daher und bietet neben der üblichen Navigation mittels Vorwärts, Rückwärts Button eine numerische Kontrolle um direkt zu einem Element in der Liste zu springen. Der einfache Aufbau ermöglicht es, den Slider schnell den eigenen Vorstellungen anzupassen.
Manchmal gibt es aber Situationen in denen die grundlegende Funktion, Inhalte hin und her zu schieben bereits ausreicht, darum habe ich selbst einen leicht verständlichen jQuery Slider geschrieben den ich in der folgenden Anleitung erklären werde.
Dieses Tutorial setzt grundsätzliche Kenntnisse in HTML, CSS und jQuery voraus, da ich nicht jedes Element bis ins kleinste sezieren werde.
HTML und CSS für den jQuery Slider
Das Grundgerüst für den Slider ist eine ungeordnete Liste (ul) welche wir in ein Block-Element mit der ID key stecken.
<div id="key"> <ul> <li> <img src="images/..">.. </li> </ul> </div>
Es ist grundsätzlich ratsam Seitenbesuchern die kein JavaScript benutzen Inhalte in einem alternativen Layout zu präsentieren, also entfernen wir im Stylesheet lediglich die Punkte vor den Listeneinträgen und lassen die Inhalte wie gewohnt untereinander ausgeben. Keine Sorge, Werte für das horizontale „sliden“ der Listeneinheiten injizieren wir später mittels JavaScript.
#key { position: relative; } #key ul { position: relative; z-index : 1; } #key li { list-style: none; left: 0; }
Dem Container ‚key‘, welcher als Fenster für unseren Slider fungiert, verpassen wir eine relative Positionierung um eine akkurate Anordnung der vor, zurück Knöpfe zu ermöglichen. Die ungeordnete Liste bekommt den selben Wert damit die Animation später sichtbar wird. Dann definieren wir folgendes Styling für die Buttons.
#key .backward, #key .forward { position: absolute; z-index: 2; width: 30px; height: 30px; line-height: 24px; text-align: center; background: #333; bottom: 10px; font-size: 32px; left: 10px; color: #fff; }
Die absolute Positionierung der Buttons ist notwendig damit Sie nicht aus dem Sichtfeld rutschen. Nachdem wir die nötigen HTML und CSS Werte umgesetzt haben, kommen wir zum wesentlichen Teil dieser Anleitung – der Programmierung mit jQuery.
jQuery Slider Tutorial – die Entwicklung in JavaScript
function simpleSlider() { /* Zunächst deklarieren wir Variablen für Dimensionen des Sliders und Anzahl an "slides". */ var $simpleSlider = jQuery( '#slider' ), sliderWidth = $simpleSlider.parent().width(), sliderItems = $simpleSlider.find( 'li' ).size(), stageWidth = sliderWidth * sliderItems, buttonWidth, counter = 0; // Die errechnete Weite übertragen wir auf jedes li (list-item). $simpleSlider.find( 'li' ).width(sliderWidth); /* Nun injizieren wir die Knöpfe am Ende des Containers via .append und messen die Weite des Knopfes. */ $simpleSlider.append( '<div class="backward">«</div><div class="forward">»</div>' ); buttonWidth = $simpleSlider.find( '.forward' ).width(); // Wir berechnen die Position des Vor-Buttons $simpleSlider.find( '.forward' ).css({ 'left': sliderWidth - buttonWidth - '10' }); /* Wir fügen einige CSS Werte hinzu. Dadurch werden die slides in einer horizontalen Reihe angeordnet. Slides die sich außerhalb des Sichtfeldes befinden, werden mittels overflow: hidden ausgeblendet. */ $simpleSlider.css( 'overflow','hidden' ); $simpleSlider.find( 'ul' ).css( 'width', '' + stageWidth + '' ); $simpleSlider.find( 'li' ).css( 'float','left' ); // Wir verstecken den zurück Knopf in der Startposition $simpleSlider.find( '.backward' ).hide(); /* Die Funktion hideTheTrigger prüft, wie häufig auf Vor und/oder Zurück geklickt wurde. Wenn das obere oder untere Limit erreicht wurde, werden der Vor- oder Zurück-Knopf verborgen. So können wir ganz einfach verhindern, dass wir einfach so ins leere sliden. */ function hideTheTrigger() { if ( counter <= 0 ) { $simpleSlider.find( '.backward' ).hide(); } else { $simpleSlider.find( '.backward' ).show(); } if ( counter >= sliderItems - 1 ) { $simpleSlider.find( '.forward' ).hide(); } else { $simpleSlider.find( '.forward' ).show(); } } /* Per Klick auf den Vor-Knopf wird eine Animation ausgeführt. Dabei wird die gesamte Liste um die Weite eines li nach links gerückt. Anschließend wird der Wert der Zählvariable (counter) mit 1 addiert. Danach wird die Funktion hideTheTrigger ausgeführt. */ $simpleSlider.find( '.forward' ).bind( 'click', function() { $simpleSlider.find( 'ul' ).animate( { left : '-=' + sliderWidth + '' }, { duration: 600 } ); counter = counter + 1; hideTheTrigger(); }); $simpleSlider.find( '.backward' ).bind( 'click', function() { $simpleSlider.find( 'ul' ).animate( { left : '+='+sliderWidth+'' }, { duration: 600 } ); counter = counter - 1; hideTheTrigger(); }); } // Nachdem das HTML der Seite geladen wurde, wird die Funktion simpleSlider ausgeführt. jQuery(document).ready(function() { simpleSlider(); });
Das war’s. Den Slider könnt Ihr hier herunterladen.
Mittlerweile hat der Slider ein Update erfahren. Näheres dazu auf der Projektseite in Englisch.
In dem Tutorial Code wurde vergessen den div’s die Klassen forward und backward zuzuweisen würde ich sagen…. Aber sonst super tutorial
Stimmt! Danke Björn für den Hinweis.