In diesem Tutorial zeige ich euch, wie ihr einen “EasySlider” mithilfe von HTML, CSS und Javascript (jQuery) erstellt. Wir benötigen hierzu ein Bildbearbeitungsprogramm und einen HTML Editor. Wie der Name EasySlider schon sagt, bildet dieser Slider nur eine Basis und kann beliebig erweitert werden.
Schritt 1: Planung des Gerüstes
Bevor wir anfangen zu programmieren, brauchen wir ein Gerüst, an dem wir uns orientieren können. In unserem Beispiel sieht das Gerüst folgendermaßen aus:
<div id="Slider_Wrapper">
<div id="Slider">
<div id="nav_links">
<div id="links"></div>
</div>
<div id="Slider_View">
<div id="Slider_Content">
<div class="images"><img src="img/Bild01.jpg" /></div>
<div class="images"><img src="img/Bild02.jpg" /></div>
<div class="images"><img src="img/Bild03.jpg" /></div>
<div class="images"><img src="img/Bild04.jpg" /></div>
<div class="images"><img src="img/Bild05.jpg" /></div>
</div>
</div>
<div id="nav_rechts">
<div id="rechts"></div>
</div>
</div>
</div>
Erklärung:
Mein Gerüst wird von einem „Wrapper“ umschlungen, in welchem sich der eigentliche Slider befindet. In dem „Slider“-Container befinden sich drei weitere DIV’s.
Hierbei geht es um die zwei Navigationspfeile und um den „Slider_View“. Den „Slider_View“ kann man sich wie ein Fenster vorstellen. Alles, was sich optisch im Inneren des „Slider_View“ befindet, kann vom User gesehen werden, der Rest ist unsichtbar.
Schritt 2: Erstellung der CSS
Damit unser Slider Gestalt annimmt, benötigen wir ein wenig CSS.
Um zu erreichen, dass die Bilder im späteren Verlauf nicht hin- und herspringen, sondern tatsächlich „sliden“, habe ich beim „Slider_Content“ eine Transition gesetzt.
body {margin:0px;padding:0px;}
* { margin: 0; padding: 0; }
.images {display: inline-block; float: left; height: 200px; padding: 10px; width: 200px; }
#Slider_Content{ height:220px; width:1100px; margin-left: 0px; transition: margin-left 0.5s ease-in-out; }
#Slider_View{ display: inline-block; float: left; height: 220px; margin: 0 auto; overflow-x: hidden; position: relative; width: 660px; }
#nav_links { display: inline-block; float: left; height: 200px; padding: 10px; position: relative; width: 100px; cursor:pointer; }
#nav_rechts { display: inline-block; float: left; height: 200px; padding: 10px; position: relative; width: 100px; cursor:pointer; }
#Slider { margin: 100px auto; position: relative; width: 900px; }
#links { width:100px; height:200px; background:no-repeat url('img/links.png'); }
#rechts { width:100px; height:200px; background:no-repeat url('img/rechts.png'); }
Tipp:
Falls euer Slider in eurem Browser merkwürdig aussieht, solltet ihr einen „CSS-Reset“ durchführen.
Schritt 3: Erstellung der Bewegung
Nun haben wir also einen Slider mit fünf Elementen, wovon allerdings nur drei angezeigt werden, und eine Navigation links und rechts des Sliders. Aber wie können wir den Slider nun „sliden“ lassen? Hierzu benötigen wir ein Script:
$(document).ready(function(){
var slide = 0;
var wert = 0;
$('#rechts').click(function(){
if(slide < 2)
{
slide++;
wert = slide * 220;
$('#Slider_Content').css('margin-left','-'+wert+'px');
}
else
{
// tu nichts
}
});
$('#links').click(function(){
if(slide > 0)
{
slide--;
wert = slide * 220;
$('#Slider_Content').css('margin-left','-'+wert+'px');
}
else
{
// tu nichts
}
});
});
Erklärung:
Wir erstellen zwei Variablen (slide und wert), beide erhalten den Inhalt „0“. Als nächstes legen wir fest, dass bei einem Klick auf das Objekt mit der ID „rechts“ eine Abfrage gestartet werden soll. Falls die Bedingung zutrifft, wird die variable „slide“ um eine Zahl hochgezählt, anschließend mit 220 multipliziert und zum Schluss als neuer „Margin-Left“-Wert bei unserem „Slider_Content“ hinterlegt. Den gleichen Ablauf findet ihr auch bei „links“, nur das die variable „slide“ um eine Zahl runtergezählt wird.
Schritt 4: EasySlider nachmachen und probieren
Ich hoffe, das Tutorial für den “EasySlider” hilft euch weiter. Falls ihr Fragen habt oder etwas bei euch nicht funktioniert, schreibt dies gerne in die Kommentarfunktion und ich antworte schnellstmöglich auf euer Anliegen.
Eine Demo findet ihr hier: EasySlider Demo
Das Paket mit allen Daten gibt es hier: EasySlider Paket
