Tutorial: Je eigen jQuery Slider maken

Tutorial: Je eigen jQuery Slider maken

Dit artikel is geschreven door Jasper Denkers. Hij is de oprichter van DevelopTheWeb.nl en de maker van de cursus Je eigen website maken. In deze cursus leer je je eigen WordPress website maken, hoe je hier bezoekers op krijgt en hoe je met je website geld kunt verdienen.

Voor deze tutorial is enige basiskennis van HTML, CSS en Javascript nodig.

Een slider is een leuke functionaliteit waarmee je je website iets ‘extra’s’ kan geven. jQuery is een krachtige javascript library waarmee het maken van een slider zeer eenvoudig wordt. In deze tutorial zie je hoe.

Je vindt hier een live demo van de slider die we gaan maken: http://www.developtheweb.nl/demo/slider.html

Stap 1 – HTML

We beginnen met de HTML code voor de slider, die is als volgt:

<div id="slider">
     <ul>
           <li id="slide1"></li>
           <li id="slide2"></li>
           <li id="slide3"></li>
           <li id="slide4"></li>
           <li id="slide5"></li>
     </ul>
     <div class="navigatie">
           <a id="vorige">Vorige</a>
           <a id="volgende">Volgende</a>
     </div>
</div>

De hele slider plaatsen we in een div met id #slider. Binnen deze div vinden we twee onderdelen terug:

  • Een lijst (ul) – De slides bevinden zich in deze lijst. Elke item in de lijst (li) is een slide en geven we een aparte id, zodat we deze apart kunnen stijlen.
  • De navigatie (div.navigatie) – Met de navigatie kun je de vorige en volgende slide bekijken. De navigatie bestaat uit een div met daarin 2 ankers welke de knoppen vorige en volgende voorstellen.

Stap 2 – CSS

Nu we de HTML code voor de slider hebben, gaan we deze stijlen door middel van CSS.

#slider

#slider {
     width: 500px;
     overflow: hidden;
}

We maken bij het voorbeeld gebruik van slides met een breedte van 500 pixels en een hoogte van 300 pixels. Dat geven we bij de slider aan met de ‘width: 500px’ eigenschap. Daarnaast zorgen we er met de ‘overflow: hidden’ eigenschap voor dat er geen scrollbars in de slider voorkomen.

#slider ul

#slider ul {
     height: 300px;
     margin: 0;
     padding: 0;
     list-style-type: none;
     position: relative;
}

De ongeordende lijst (ul) bevat alle slides naast elkaar. Deze heeft daarom de ‘height: 300px’ eigenschap. Daarnaast verwijderen we de standaard lijsteigenschappen met ‘margin: 0; padding: 0; list-style-type: none;’ .

Als laatst geven we nog de eigenschap ‘position: relative;’ mee. Hierdoor kunnen we de lijst verplaatsen ten opzichte van ‘div#slider’.

#slider ul li

#slider ul li {
     float: left;
     width: 500px;
     height: 300px;
}

De items in de lijst (#slider ul li) zijn de daadwerkelijke slides. De eigenschap ‘float: left;’ zorgt ervoor dat de slides naast elkaar komen te staan. Daarnaast geven we nog de afmetingen van de slides mee met de eigenschappen ‘width’ en ‘height’.

Navigatie

.navigatie {
     height: 40px;
     line-height: 40px;
     background-color: #EEE;
}
.navigatie a {
     display: block;
     cursor: pointer;
     padding: 0 15px;
}
#vorige {
     float: left;
}
#volgende {
     float: right;
}

Van de div.navigatie maken we een grijze balk van 40 pixels onder de slides. Met de eigenschap ‘line-height: 40px;’ zorgen we ervoor dat de tekst verticaal gezien in het midden van de balk terechtkomt.

Met .navigatie a geven we de eigenschappen voor de knoppen mee. We zorgen ervoor dat de ankers als ‘block’ worden weergegeven, dat er een ‘handje’ tevoorschijn komt als je de muis over de knoppen beweegt en we plaatsen ze 15 pixels van de zijkant af.
Als laatste zorgen we ervoor dat de knoppen #vorige en #volgende links en rechts in de balk geplaatst worden.

Slides

Je kunt de opmaak van de slides zelf bepalen. Om de functionaliteit van de slider goed te kunnen testen gebruiken we nu alleen een paar verschillende achtergrondkleuren voor de slides:

#slide1 {
     background-color: #CFF;
}
#slide2 {
     background-color: #FCF;
}
#slide3 {
     background-color: #FFC;
}
#slide4 {
     background-color: #FCC;
}
#slide5 {
     background-color: #CCF;
}

Tot zover de CSS voor de slider, we gaan nu kijken naar de javascript code.

Javascript

Voor de javascript maken we gebruik van de jQuery library, je voegt deze toe door de volgende regel in de head van je document te zetten:

<script type="text/javascript" src="http://code.jquery.com/jquery- 1.6.2.min.js"></script>

Voordat we de code bespreken zie je hier alvast de volledige javascript code:

$(document).ready(function(){
     var slides = $('#slider ul li');
     var slideAantal = slides.length;
     var slideBreedte = 500;
     var slideHuidig = 0;
// Zorg ervoor dat de totale breedte van #slide overeenkomt met de breedte van het aantal slides
$('#slider ul').css('width', slideAantal * slideBreedte);
// Functie welke wordt aangeroepen wanneer er op de vorige of volgende knoppen wordt gedrukt
     $('.navigatie a').click(function() {
// Als op de knop 'volgende' is gedrukt...
           if ($(this).attr('id') == 'volgende') {
                // ...naar de volgende slide gaan...
                slideHuidig = slideHuidig + 1;
           }
// ...en wanneer op de 'vorige' knop is gedrukt...
           else {
                // ...naar de vorige slide gaan
                slideHuidig = slideHuidig - 1;
           }
// Zorg er weer voor dat de vorige of volgende knoppen goed worden weergegeven
           navigatie(slideHuidig);
// Verschuif #slides door middel van de linker margin 
$('#slider ul').animate({
                'marginLeft' : (-slideHuidig * slideBreedte)
           });
});
// Functie die ervoor zorgt dat de vorige of volgende knoppen op de juiste momenten worden weergegeven
function navigatie(slideHuidig) {
// Bij de laatste slide de 'volgende' knop weglaten.. 
if (slideAantal - 1 == slideHuidig) {
$('#volgende').hide()
} //...of laten zien wanneer het niet de laatste slide is 
else {
                $('#volgende').show()
           }
           // Bij de eerste slide de 'vorige' knop weglaten..
           if (slideHuidig == 0) {
$('#vorige').hide()
} //...of laten zien wanneer het niet de eerste slide is 
else {
                $('#vorige').show()
           }
}
// Zorg ervoor dat de 'vorige' knop wordt weggelaten wanneer de pagina wordt geladen
     navigatie(slideHuidig);
});

We bekijken de javascript code nu per onderdeel.

Variabelen

var slides = $('#slider ul li');
var slideAantal = slides.length;
var slideBreedte = 500;
var slideHuidig = 0;

We declareren eerst een aantal variabelen. De eerste variabale, ‘slides’, geven we elke item in de lijst. Oftewel; elke slide. De tweede variabele, ‘slideAantal’, geven we doormiddel van de waarde ‘slides.length’ het aantal slides mee.

De variabele ‘slideBreedte’ bevat de breedte van elke enkele slide in pixels. Zorg ervoor dat je deze waarde ook verandert wanneer je de afmetingen van de slides verandert.
De laatste variabele bevat de geselecteerde slide. In het begin is dit de eerste slide, daarom kennen we deze de waarde ‘0’ toe.

#slider ul

$('#slider ul').css('width', slideAantal * slideBreedte);

Met deze regel zorgen we ervoor dat de breedte van de lijst overeenkomt met de breedte van alle slides naast elkaar. Deze wordt berekend door het aantal slides te vermenigvuldigen met de breedte van elke slide.

Animatie

De daadwerkelijke animatie wordt veroorzaakt door onderstaande functie. Deze wordt aangeroepen wanneer op de knop vorige of volgende wordt gedrukt.

     $('.navigatie a').click(function() {
           // Als op de knop 'vorige' is gedrukt...
           if ($(this).attr('id') == 'volgende') {
                // ...naar de volgende slide gaan...
                slideHuidig = slideHuidig + 1;
           }
// ...en wanneer op de 'volgende' knop is gedrukt...
           else {
                // ...naar de vorige slide gaan
                slideHuidig = slideHuidig - 1;
}
// Zorg er weer voor dat de vorige/volgende knoppen goed worden weergegeven
           navigatie(slideHuidig);
// Verschuif #slides door middel van de linker margin 
$('#slider ul').animate({
                'marginLeft' : (-slideHuidig * slideBreedte)
           });
});

Er wordt eerst gekeken of de knop waarop gedrukt is de vorige of de volgende is. Aan de hand hiervan wordt bepaald of de huidige positie respectievelijk met één verlaagd of verhoogd moet worden.

Vervolgens wordt de functie navigatie aangeroepen, deze bekijken we straks. Deze functie zorgt ervoor dat de vorige knop niet wordt weergegeven bij de eerste slide en de knop volgende niet wordt weergegeven bij de laatste slide.

De animatie wordt veroorzaakt door de animate functie van jQuery. Deze zorgt ervoor dat de linker margin van de lijst, met daarin alle slides, wordt aangepast. Het veranderen van de linker margin is eigenlijk verschuiven, wat voor het slidereffect zorgt.

Navigatie

// Functie die ervoor zorgt dat de vorige/volgende knoppen op de juiste momenten worden weergegeven
function navigatie(slideHuidig) {
// Bij de laatste slide de 'volgende' knop weglaten.. 
if (slideAantal - 1 == slideHuidig) {
$('#volgende').hide()
} //...of laten zien wanneer het niet de laatste slide is 
else {
                $('#volgende').show()
           }
           // Bij de eerste slide de 'vorige' knop weglaten..
           if (slideHuidig == 0) {
$('#vorige').hide()
} //...of laten zien wanneer het niet de eerste slide is 
else {
                $('#vorige').show()
           }
}
// Zorg ervoor dat de 'vorige' knop wordt weggelaten wanneer de pagina wordt geladen
     navigatie(slideHuidig);

De functie navigatie() zorgt ervoor dat de knoppen op de juiste momenten worden weergegeven. Er wordt gekeken of de huidige slide de laatste is. Is dit het geval, dan wordt de volgende knop niet weergegeven. Het zelfde wordt gedaan voor de eerste slide en de vorige knop.

In de laatste regel, ‘navigatie(slideHuidig);’, wordt ervoor gezorgd dat de knoppen goed worden weergegeven wanneer de pagina wordt geopend. Het komt er op neer dat de vorige knop dan niet wordt weergegeven.

Demo

Je kunt een demo van deze slider hier bekijken: http://developtheweb.nl/demo/slider.html

Deze pagina maakt gebruik van de volgende bestanden:
http://developtheweb.nl/demo/slider.css
http://developtheweb.nl/demo/slider.js

Je kunt ook de voorbeeldbestanden in één keer downloaden:
http://developtheweb.nl/demo/slider.zip

          Leuk als je dit artikel deelt:
Share

26 gedachten over “Tutorial: Je eigen jQuery Slider maken

  1. Handig=D

    Ik ga hem vanmiddag helemaal lezen, nu alleen de demo gezien.

    Komen er meer van dit soort Tutorials?

    Misschien een idee om er knoppen aan te koppelen?

    Thanks

  2. Er komen tegenwoordig meer tutorials van Jasper online dan van Bjorn…

    Even wat puntjes op de code, heb de tut even globaal doorgelezen:
    – een navigatie is ook een lijst. Tevens hoor je hier de <nav> tag voor te gebruiken.
    – je zou er beter aan doen om dit gelijk in plugin vorm te schrijven:

    jQuery.fn.jaspersSlider = function() {
    // alle code
    };

    – het is verstandig om je jquery code in een self executing anonymous function te stoppen:

    (function($) {
    // de code
    })(jQuery);

    – een echte slider hoort ook automatisch te gaan. Gebruik setTimeout i.c.m. jQuery.fn.animate() om dit voor elkaar te krijgen.

  3. @Wouter J: Al je opmerkingen zijn goede, ik heb ze alleen bewust niet in deze tutorial opgenomen.

    Wat je zegt klopt, maar ik wou deze tutorial iets minder uitgebreid houden; zo kan iedereen de basis van een slider maken en ook goed begrijpen hoe en waarom deze werkt.

  4. @jasper zo kan iedereen de basis van een slider maken en ook goed begrijpen hoe en waarom deze werkt.

    leuke tut,en niets ten nadele maar als je wilt dat de basis begrepen wordt zou die in javascript gemaakt moeten worden want dat is de basis. evt. met een mini framework.
    Want waarom denkt ieder toch dat je een core
    van 160K (waarvan weinig gebruikt wordt) zoals
    JQ nodig is ? 2-4K kan ook en houd website
    licht.

  5. @Wadelft, +1 😀

    @Rene, ik heb in het verleden wel eens wat geschreven. Zoals een 5-delige tutorial reeks voor Google Maps API V3 en een enkele tutorial over CSS3 media-queries. Maar na wat problemen met het online plaatsen en bjorn heb ik besloten artikelen ergens anders te plaatsen. Zoals op phphulp of sitemasters. En binnenkort hopelijk op mijn eigen website.

  6. @wadelft
    Je kan, anno 2012, ook tever gaan met dingen licht houden.

    jQuery minified is 90 kb, dus ik weet niet hoe je aan "160" komt?

  7. @wadelft Tuurlijk, maar dat heeft op eenzelfde manier met de insteek van het artikel te maken als de reactie van Wouter. Een artikel over het maken van een slider kan op talloze manieren geschreven zijn, maar de titel van dit artikel bevat niet voor niks het woordje 'jQuery'.

    Door het artikel op deze manier te brengen is voor veel mensen de inhoud te begrijpen en belangrijker, ze kunnen een beetje inzicht krijgen in hoe zo'n slider nou eigenlijk werkt. Wanneer bijvoorbeeld de animate-functie niet wordt gebruikt wordt het al een stuk ingewikkelder verhaal.

  8. @jasper ; was niet mijn bedoeling er een disc
    van te maken hoor, maar het lijkt net of het
    met jq makkelijker is . mijn hele punt is alleen dat het gros vergeten is dat het js is
    en al bij het minste naar jq gegrepen wordt.
    (ik heb wel gezien voor een simpele
    getElementById werd JQ gebruikt.!!)

    Zonder animantie? nee ; Ik heb jouw voorbeeld even als voorbeeld genomen : evenveel regels js en voor animatie Emile (=2,5k):
    http://www.ancotheek.net76.net/emile/hor_slider1b.htm
    maar jouw tuts is verder prima initiatief hoor

    Sebastiaan : 90k packet en 242K unpacked!
    wat unpacked en geintreperteerd moet worden en
    omgezet naar opcodes .

  9. Nee hoor, packed code kan 1:1 uitgevoerd worden door elke moderne JS engine (V8). Je argument is dus niet helemaal waar, enige JS engine die dat niet kan is die van IE.

  10. Hallo Timo,

    Dit kun je in JavaScript doen met een zogenaamde 'Timer'. Een Timer declareer je op de volgende manier:

    var timer;
    timer = setTimeout("functie()",3000);

    Wanneer deze timer wordt aangemaakt, wordt na 3 seconden ( = 3000 milliseconde) de functie "functie()" aangeroepen. Je kunt hier een functie neerzetten die ervoor zorgt dat de slider een slide opgschuift (dit kan dus met hetzelfde stukje code als in $('.navigatie a').click()).

    Vervolgens moet je onderaan deze functie de Timer opnieuw instellen, zodat drie seconden later de slider weer opschuift. Dit doe je door het bovenstaande stukje te herhalen:

    timer = setTimeout("functie()",3000);

  11. Hoi Jasper,
    Erg goede tutorial, dit was precies waar ik al heel lang naar op zoek was!

    Alleen een kleine opmerking: Je hebt mij de jquery code nu dit staan:

    <script type="text/javascript" src="http://code.jquery.com/jquery- 1.6.2.min.js"></script>

    Maar er staat een specie tussen het streepje (-) en de een. Hierdoor krijg je een 404 foutmelding als je de URL in je browser plakt. Ik denk dat je dit bedoelt:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script&gt;

  12. Hoi Jasper,

    Ik ben lang bezig geweest met het voor elkaar krijgen, maar het lukt me niet echt.

    Ik heb timer als variabele gedeclareerd als "var timer;".

    «timer = setTimeout(".navigatie a()",3000);» heb ik onder :
    $('.navigatie a').click(function()
    neer gezet.

    En de timer = setTimeout("functie()",3000);
    helemaal onder aan de pagina gezet. Het lukt me nog steeds niet om de slider automatisch de volgende foto te laten zien.

    Wat doe ik fout?

    Alvast bedankt!

  13. Mooie demo, goede uitleg. Ik zou graag in de slider radio buttons willen opnemen en dan bij selectie van een radio en keuze "volgende" willen laten sliden naar een specifiek slide. Hier de html code:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script&gt;
    <script type="text/javascript" src="slider.js"></script>
    <script src="SpryAssets/SpryValidationRadio.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryValidationRadio.css" rel="stylesheet" type="text/css">
    </head>

    <body>

    <div id="slider">
    <ul>
    <li class="slide" id="slide1">
    <form name="form1" method="post" action="">
    <p>van welk fruit type houd je het meest? </p>
    <div id="spryradio1">
    <table width="200">
    <tr>
    <td><label>
    <input type="radio" name="R1" value="radio" id="R1_0">
    appels
    </label></td>
    </tr>
    <tr>
    <td><label>
    <input type="radio" name="R1" value="radio" id="R1_1">
    peren
    </label></td>
    </tr>
    </table>
    <span class="radioRequiredMsg">Selecteer een optie.</span></div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </form>
    </li>
    <li class="slide" id="slide2">welk merk appel heeft je voorkeur?<br>
    <br>
    <div id="spryradio2">
    <table width="200">
    <tr>
    <td><label>
    <input type="radio" name="R2" value="radio" id="R2_0">
    granny's
    </label></td>
    </tr>
    <tr>
    <td><label>
    <input type="radio" name="R2" value="radio" id="R2_1">
    elstars
    </label></td>
    </tr>
    </table>
    <span class="radioRequiredMsg">Selecteer een optie.</span></div>
    </li>
    <li class="slide" id="slide3">
    <div id="spryradio3">
    <table width="200">
    <tr>
    <td><label>
    <input type="radio" name="R3" value="radio" id="R3_0">
    chiquita
    </label></td>
    </tr>
    <tr>
    <td><label>
    <input type="radio" name="R3" value="radio" id="R3_1">
    favorita
    </label></td>
    </tr>
    </table>
    <span class="radioRequiredMsg">Selecteer een optie.</span></div>
    </li>
    <li class="slide" id="slide4"></li>
    <li class="slide" id="slide5"></li>
    </ul>
    <div class="navigatie">
    <a id="vorige"><input name="vorige" type="button" value="vorige"></a>
    <a id="volgende"><input name="volgende" type="button" value="volgende"></a>
    </div>
    </div>
    <script type="text/javascript">
    <!–
    var spryradio1 = new Spry.Widget.ValidationRadio("spryradio1");
    var spryradio2 = new Spry.Widget.ValidationRadio("spryradio2");
    var spryradio3 = new Spry.Widget.ValidationRadio("spryradio3");
    //–>
    </script>

    Daar heb ik twee vragen over:
    Is het handig hier een form te gebruiken of moet ik dat niet doen?
    Hoe pas ik het js-script aan dat de juiste slide verschijnt?

    Bij voorbaat hartelijk dank.

  14. Simpel, maar effectief. Precies wat ik een tijdje al zocht.

    Nog wel een klein vraagje. De animatie van het verschuiven vind ik wat te snel gaan. Hoe kan ik de snelheid van de animatie vertragen?

    Alvast bedankt en tof voor het schrijven van de tutorial

  15. Dank je wel. En hoe kan ik het zo maken dat je op een knopje klikt en dan de slider uitschuift en als je weer klikt dan gaat het terug, een soort popup slider waarin ik events kan plaatsen en wat dan rouleert?

  16. Heey! precies wat ik wou! helemaal top. 1 vraagje. ik probeer de slider width 100% te maken. heb in de css alle wwardes aangepast en van var slideBreedte = 1000; var slideBreedte = screen.width; gemaakt. op de een of andere manier zet hij nu alleen alle slides onder elkaar…

  17. Super handige beschrijving! Bedankt!

    Kunnen jullie mij misschien verder helpen met de volgende vraag: Hoe kan ik eenvoudig een afbeelding invoegen in plaats van de tekst "volgende" en "vorige"?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *