JQUERY
// Kijken of de muis op de slider staat of niet
shover = false;
// Als het wel zo is, aangeven dat het zo is
$( "#slider" ).mouseenter(function () {
shover = true;
});
// Als het niet zo is, aangeven dat het niet zo is
$( "#slider" ).mouseleave(function () {
shover = false;
});
var huidige = 1;
var volgende = 2;
setInterval(function () {
// Alleen uitvoeren als de muis van de slider af is
if(!shover) {
var volgende = huidige;
volgende++;
var volgende = "." + volgende;
$( "#slider .part" ).stop().fadeOut(500);
$( volgende ).stop().fadeIn(300);
huidige++;
if(huidige == 3) {
huidige = 0;
}
}
}, 5000);
HTML
<div id="slider">
<div class="part 1">
<ul>
<li class="actief" name="1"></li>
<li name="2"></li>
<li name="3"></li>
</ul>
</div>
<div class="part 2">
<ul>
<li name="1"></li>
<li class="actief" name="2"></li>
<li name="3"></li>
</ul>
</div>
<div class="part 3">
<ul>
<li name="1"></li>
<li name="2"></li>
<li class="actief" name="3"></li>
</ul>
</div>
</div>
De UL in de verschillende "parts", laat ik zien of het part 1, 2 of 3 is door middel van de class actief.
Nu wil ik deze list items aanklikbaar maken, en dat je vervolgens naar deze slide gaat. Als de 5 seconden van die slide weer om zijn, moet hij weer naar de volgende (of terug naar het begin als hij bij de derde slide is).
Er is vast een veel slimmere manieren dan in elke "part" een UL te zetten.
Kan iemand mij helpen om 3 bolletjes in de slider te zetten, die aangeven in welke slide "je zit". En als je er vervolgens op een klikt, ga je naar deze slide, en gaat hij vanaf hier weer verder.
Hopelijk is mijn uitleg/beschrijving een beetje duidelijk..
Groet.
