frog block | Technik und Design Blog

5. Juni 2015 um 15:06 Uhr

EasySlider – Tutorial zum selber machen

EasySlider – Tutorial zum selber machen

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 des EasySlider

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 vom EasySlider 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 EasySlider 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 EasySlider 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

Geschrieben von

8 likes Tipps & Tutorials # , , , ,
Share: / / /

4 Kommentare bei “EasySlider – Tutorial zum selber machen

  1. Reid sagt:

    What’s up, just wanted to say, I liked this blog post. It was helpful. Keep on posting!|

    1. Hey Reid,
      thank you very much for your feedback!
      I’m glad that you like my Thread.

  2. Rodney sagt:

    It’s actually a great and useful piece of information. I am glad that you shared this useful info with us. Please stay us up to date like this. Thanks for sharing.|

    1. Hey Rodney,
      also a big thank you for you.
      I’ll post part 2 in a few weeks.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *