een slider maken

In de HTML (mark-up) is er voor elke dia een section-tag. De dia’s zijn immers onderling gelijkwaardig. Deze section-tag heeft een class en een id. Door de id kan elke dia zijn eigen afbeelding als achtergrond meekrijgen.
Om de section’s zit een div met de class strook. Hierin moeten alle dia’s naast elkaar geplaatst worden.
Om de div.strook zit weer een div.venster, die maar 1 dia tegelijk laat zien.

Hier wordt de pagina en de slider opgemaakt. Daarvoor wordt een stijlblad aangemaakt en gekoppeld. Er is hier als in zoveel web-pagina’s een wrapper-div. Deze krijgt een breedte en wordt daarna met margin: 0 auto; gecentreerd. Via Google-web-fonts krijgen de koppen een karakteristiek web-font.
De div.venster krijgt een maximale breedte, die gelijk is aan de breedte van de afbeeldingen.
In de afzonderlijke .dia sections wordt de achtergrond-afbeelding net zo groot gemaakt dat die de section bedekt. De teksten worden leesbaar gemaakt door een witte kleur met donkere schaduw. Omdat elke section ook een id heeft, kunnen ze ieder hun eigen achtergrond afbeelding krijgen.
Om de aan te geven dat de slider interactief is, geef je de div.strook een cursor:pointer.

Het opmaken van de vorige video wordt afgerond. Voor de slider is het van belang dat de sections naast elkaar komen te staan. Dit gaat via float:left;
Om te voorkomen dat de andere elementen van de pagina zich naast de sections nestelen, geven we die een overflow: auto;
In deze video worden ook de h1 en footer, die geen deel uitmaken van de slider opgemaakt. Doe dit naar eigen inzicht ook in jouw training.

Hier worden de scripts gekoppeld. Eerst wordt jQuery gekoppeld. Je kunt het van jquery.com/download/ downloaden, maar op de site staat ook een CDN-link. (CDN = Content Delivery Network) De bezoeker heeft dan sneller toegang tot dit script. alleen voor gevallen je het script niet buiten de site kunt aanroepen zijn de downloads de oplossing.
jQuery is een script dat JavaScript kan stroomlijnen. Jouw eigen script mag pas geladen worden nadat het jQuery script is geladen. Plaats het er dus onder.
In dit voorbeeld staat het script boven de HTML-elementen. Het script zal HTML-elementen selecteren. Daarom moet eerst worden gewacht tot de hele pagina door de browser is ingelezen. Daarom wordt de uitvoering van het script uitgesteld via $(document).ready(). Dit heeft precies dezelfde werking als de addEventListener(‘load’, gaJeGangMaar) in regulier JavaScript.
Hier wordt in het script de breedte van het venster in een variabele gestopt en uitgelezen. Hiermee testen we of de koppeling wel gelukt is. Met $(‘.venster’) wordt in jQuery het element met de class venster geselecteerd. Met .width() bepaal je de breedte.

Nu de breedte van het venster te bepalen is kunne we die toekennen aan de sections met de class ‘dia’. Je selecteert deze met $(‘.dia’) en met .width() geeft je ze ook breedte. Tussen de haakjes moet de breedte komen en die levert de variabele diaBreedte. De hoogte is ook instelbaar. Deze wordt afgeleid uit de verhouding tussen de hoogte en de breedte van de afbeeldingen. die waarde wordt in height() gestopt. De section.dia wordt niet opnieuw geselecteerd: dat levert onnodige belasting van de computer op. Met $(‘dia’).width().height() gaat dat efficiënter.

Met .css() kun je selecties stijlen. tussen de haakjes kun de eigenschap en de waarde opgeven. De eigenschap is veelal een string en moet dus van aanhalingstekens worden voorzien: ‘margin-left’. De waarde kan ook een string zijn bijvoorbeeld ‘-550px’.
het wordt handiger als we een teller als variabele instellen en die vermenigvuldigen met de breedte van een dia. Dan zal bij een heel getal er precies 1 slide verschijnen.
Ook animaties zijn mogelijk met .animate(). Het eerste argument is een object met minimaal 1 eigenschap en een waarde: bijvoorbeeld {‘margin-left’: ‘-550px’} vervolgens wordt de tijdsduur in milliseconde als argument meegegeven.

Om de animatie continue te laten plaatsvinden stoppen we de animatieactie in een functie. Die kun je immers naar believen aanroepen. De waarde waarnaar geanimeerd wordt, is geen string maar wordt bepaald door de breedte van de dia’s en de waarde van de teller.
In de functie wordt teller telkens opgehoogd.
Met setInterval() wordt de functie telkens aangeroepen en de teller verhoogd.
De slider schuift nu continu door. als de laatste dia is bereikt moet de slider worden teruggezet en de teller weer op 0 gezet worden. We doen dit met een if-statement, die controleert of de teller niet te hoog is.

In jQuery kun je een element selecteren en aangeven wat er moet gebeuren als er op dat element een actie plaatsvindt. We gaan hier met de muis over en weer ervan af. Dit gaat met $(‘betreffendElement’).mouseenter().mouseleave();
tussen de haakjes bij de events vertel je via een anonieme functie wat er moet gebeuren. Voor een muisklik is dat $(‘betreffendElement’).click();
De selectie van het element heb je in eerder video’s in deze tutorial al gezien. Voor de acties die tussen de haakjes geplaatst worden komen we hier de clearInterval() tegen, warbij tussen de haakje de variabele staat, die de setInterval aanschakelde. Ook de setInterval() komt weer terug.
een bijzondere is hier de url-eigenschap. Van $(location).attr() zet je het type op ‘href’ en als waarde geef je de url tussen quotes weer: $(location).attr('href', 'http://nl.wikipedia.org/wiki/Scheepvaarthuis');

Zet deze training online in je bewijzenmap als
http://12345.hosts.ma-cloud.nl/bewijzenmap/periode2/dir/banner/ met als naam index.html