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:

     

           

           

           

           

           

     
     

           Vorige
           Volgende
     

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:

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