Javascript Image slider

Een image slider is een veel voorkomende manier om een serie afbeeldingen te vertonen op een website. Vaak worden er binnen een pagina verschillende sliders gebruikt. Het is met Javascript mogelijk om alle sliders binnen een pagina met 1 functie aan te sturen. Daarvoor wordt ‘event.target’ gebruikt, het ‘doel van de gebeurtenis’. Door ‘event.target’ te gebruiken weet Javascript wie er aangeklikt wordt. vervolgens kan Javascript de afbeelding die bij de aangeklikte knop hoort aanpassen.

Laten we beginnen met een enkele image-slider. We maken een div-tag met daarin een div met afbeeldingen en 2 h1-tags met daarin een pijl naar links en een pijl naar rechts. We gebruiken classes in plaats van id’s zodat we de image slider makkelijk kunnen hergebruiken als we klaar zijn.

<body>
<div class=”imgSlider”>
     <div class=”plaatjes”>
          <img src=”img/brood.jpg” />
          <img src=”img/croissant.jpg”/>
          <img src=”img/fruit.jpg”/>
          <img src=”img/coffee.jpg”/>
     </div>
     <h1 >&lt;</h1>
     <h1 >&gt;</h1>
</div>
</body> 

Gebruik css om de div ‘imgSlider’ de afmeting te geven van 1 afbeelding. In het voorbeeld is dat 500px bij 300px. We stellen alvast een margin in van 50px zodat we makkelijk extra sliders kunnen toevoegen als de eerste slider af is.

<style type=”text/css”>
.imgSlider
{
     position:relative;
     width:500px;
     height:300px;
     margin:50px;
     overflow:hidden;
}
</style>

Gebruik css om de afbeelding een maat te geven. We geven een vaste breedte en een automatisch hoogte zodat de afbeelding in verhouding blijft als hij geschaald moet worden. We gebruiken ‘float:left’ om de afbeeldingen zonder tussenruimte naast elkaar te laten staan.

<style type=”text/css”>
.imgSlider
{
     position:relative;
     width:500px;
     height:300px;
     margin:50px;
     border:#000 dotted;
}

.imgSlider img
{
     width:500px;
     height:auto;
     float:left;
}
</style>

De afbeeldingen hebben nog niet genoeg ruimte om naast elkaar te staan, de div ‘imgSlider’ is maar breed genoeg voor 1 afbeelding. Om dat op te lossen geven we de div ‘plaatjes’ genoeg breedte voor 4 afbeeldingen naast elkaar. 1 afbeelding is 500px breed. We maken ‘plaatjes’ dus 2000px breed. Met Javascript passen we later de waarde ‘left’ aan van ‘plaatjes’. Om dat soepel te laten verlopen gebruiken we een css-transition.

<style type=”text/css”>
.imgSlider
{
     position:relative;
     width:500px;
     height:300px;
     margin:50px;
     border:#000 dotted;
}

.imgSlider img
{
     width:500px;
     height:auto;
     float:left;
}

.imgSlider .plaatjes
{
     position:absolute;
     top:0px;
     left:0px;
     width:2000px;
     transition:left 0.5s;
}
</style>

In dit voorbeeld is alle content buiten de div ‘imgSlider’ onzichtbaar door de instelling ‘overflow:hidden’. Daarom plaatsen we de h1-tags met de pijlen binnen de div ‘imgSlider’. De h-1 tags hebben geen class of id, maar we kunnen de css (pseudo)selector ‘nth-child’ gebruiken. De div ‘imgSlider’ bestaat uit 3 elementen: de div ‘plaatjes’ en 2 h1-tags. ‘plaatjes’ is het eerste ‘child’, de eerste h-1 tag is het tweede ‘child’ en de tweede h1-tag is het derde ‘child’. De eerste h1-tag krijgt de instelling ‘float-left’, de tweede h1-tag ‘float-right’.

<style type=”text/css”>
.imgSlider
{
     position:relative;
     width:500px;
     height:300px;
     margin:50px;
     border:#000 dotted;
}

.imgSlider img
{
     width:500px;
     height:auto;
     float:left;
}

.imgSlider .plaatjes
{
position:absolute;
top:0px;
     left:0px;
     width:2000px;
     transition:left 0.5s;
}
.imgSlider h1:nth-child(2)
{
     float:left;
     position:relative;
     margin:20px;
}
.imgSlider h1:nth-child(3)
{
     float:right;
     position:relative;
     margin:20px;
}
</style>

Nu is het tijd voor Javascript. Eerst moeten we de pijlen laten luisteren naar de muisklik. Als een pijl aangeklikt wordt, wordt de functie ‘verschuiven()’ uitgevoerd.

<body>
<div class=”imgSlider”>
     <div class=”plaatjes” style=”left:0px;”>
          <img src=”img/brood.jpg”/>
          <img src=”img/croissant.jpg”/>
          <img src=”img/fruit.jpg”/>
          <img src=”img/coffee.jpg”/>
     </div>
     <h1 onclick=”schuiven()”>&lt;</h1>
     <h1 onclick=”schuiven()”>&gt;</h1>
</div>
<script type=”text/javascript”>
function schuiven()
{
}
</script>
</body>

Als op 1 van de pijlen geklikt wordt, is het de bedoeling dat de div ‘plaatjes’ verplaatst wordt binnen de div ‘imgSlider’. Daarvoor moet Javascript eerst op zoek naar ‘imgSlider’ en ‘plaatjes’. We geven Javascript eerst de opdracht een variabel met de naam ‘imgSlider’ te maken waarin de slider opgeslagen wordt. Vervolgens zoekt Javascript binnen ‘imgSlider’ naar een element met de class-naam ‘plaatjes’. Dat element wordt opgeslagen als een variabele met de naam ‘plaatjes’. Als er op 1 van de pijlen geklikt wordt moet ‘plaatjes’ verschuiven. Dat doen we door de css waarde ‘left’ te veranderen. Die waarde wordt gegeven als een tekst, bijvoorbeeld ’10px’. Omdat je met tekst geen rekensommen kunt maken, gebruiken we ‘offsetLeft’ om Javascript de getal-waarde te laten zoeken van de css ‘left’ instelling. ‘offsetLeft’ is een getal en kan alleen gebruikt worden om de left-waarde te lezen. Het is niet mogelijk om een waarde toe te kennen.

<script type=”text/javascript”>
var imgSlider=document.getElementsByClassName(“imgSlider”)[0];
var plaatjes=imgSlider.getElementsByClassName(“plaatjes”)[0];
var plaatjesLeft=plaatjes.offsetLeft;

function schuiven()
{
}
</script>

Nu is het tijd de functie ‘schuiven()’ te gebruiken. Als er op een van de pijlen geklikt wordt, moet de slider verschuiven, maar de slider kan twee kanten op schuiven; naar links en naar rechts. Door tussen de haakjes van de functie ‘schuiven()’ een parameter door te geven kunnen we dezelfde functie gebruiken voor het links en rechts verschuiven van de plaatjes.

<div class=”imgSlider”> 
     <div class=”plaatjes”>
          <img src=”img/brood.jpg”/>
          <img src=”img/croissant.jpg”/>
          <img src=”img/fruit.jpg”/>
          <img src=”img/coffee.jpg”/>
     </div>
     <h1 onclick=”schuiven(‘links’)”>&lt;</h1>
     <h1 onclick=”schuiven(‘rechts’)”>&gt;</h1>
</div>

Als we parameters meesturen als de functie geactiveerd wordt, moet bij de functie-beschrijving verteld worden dat er  parameters binnen komen. Er wordt een soort lokale variabele gemaakt die de waarde krijgt van wat er opgestuurd wordt. In dit voorbeeld heet de variabele ‘richting’ en kan de waarde ‘links’ of ‘rechts’ zijn.

function schuiven(richting)
{
}

De waarde van ‘richting’ kunnen we gebruiken om Javascript te laten kiezen naar welke kant de plaatjes verplaatst moeten worden.

function schuiven(richting)
{
     if(richting==”links”)
     {
     }
     else if(richting==”rechts”)
     {
     }
}

Laten we beginnen met de plaatjes naar links te verschuiven. De variabele ‘plaatjesLeft’ kijkt wat de css left-waarde is van de plaatjes. Daarvan haalt hij 500 af (plaatjesLeft-=500), dat is de breedte van een afbeelding. Die nieuwe waarde van ‘plaatjesLeft’ wordt toegepast op de css left-waarde van de plaatjes (plaatjes.style.left=plaatjesLeft). Het woord “px” wordt er achter geplakt omdat css een waarde en een eenheid nodig heeft.

function schuiven(richting)
{
     if(richting==”links”)
     {
          plaatjesLeft-=500;
          plaatjes.style.left=plaatjesLeft +”px”;
     }
     else if(richting==”rechts”)
     {
     }
}

Nu werkt de slider al wel, maar als er te vaak geklikt wordt verdwijnen alle plaatjes uit beeld. Dat gaan we voorkomen door de plaatjes terug te sturen naar de begin positie. Een plaatje is 500 pixel breed. We hebben in dit voorbeeld vier plaatjes, na drie keer schuiven is het vierde plaatje in beeld. Na het vierde plaatje moet ‘plaatjes’ terug naar het begin. Dus na drie keer schuiven is de waarde van plaatjesLeft -1500. De waarde van ‘plaatjesLeft ‘ moet groter blijven dan -1500, want als de waarde kleiner wordt zouden de plaatjes uit beeld verdwijnen, dat is niet de bedoeling. Daarom wordt ‘plaatjes’ terug gestuurd naar het begin:

function schuiven(richting)
{
     if(richting==”links”)
     {
          if(plaatjesLeft>1500)
          {
               plaatjesLeft-=500;
               plaatjes.style.left=plaatjesLeft +”px”;
          }
          else
          {
               plaatjesLeft=0;
               plaatjes.style.left=plaatjesLeft +”px”;
          }
     }
     else if(richting==”rechts”)
     {
     }
}

Dit kunnen we herhalen voor het schuiven naar rechts, maar dan omgekeerd: Bij ‘plaatjesLeft’ wordt nu 500 opgeteld. Maar de css left-waarde moet kleiner blijven dan ‘0’, anders verdwijnen de plaatjes uit beeld. Dus als ‘plaatjesLeft’ kleiner is dan nul, dan mag er vijfhonderd bij opgeteld worden. Anders wordt de css left-waarde aangepast naar ‘-1500px’, waardoor het laatste plaatje in beeld komt.

function schuiven(richting)
{
     if(richting==”links”)
     {
          if(plaatjesLeft>1500)
          {
               plaatjesLeft-=500;
               plaatjes.style.left=plaatjesLeft +”px”;
          }
          else
          {
          plaatjesLeft-=500;
          plaatjes.style.left=plaatjesLeft +”px”;
          }
     }
     else if(richting==”rechts”)
     {
          if(plaatjesLeft<0)
          {
               plaatjesLeft+=500;
               plaatjes.style.left=plaatjesLeft +”px”;
          }
          else
          {
               plaatjesLeft=-1500;
               plaatjes.style.left=plaatjesLeft +”px”;
          }
     }
}

Leave a Reply

Your email address will not be published. Required fields are marked *