jquery slider working, just one question
Hi,
I have a slider, that slides automatically, and when prev-next buttons are clicked.
However, I want to include that when last item is shown, a click on next slides back to the beginning and/or that it does this automatically..
any ideas, this is the code I have so far..
I thought that the last bit.. if(page == pages) { ... } should do the trick.. but no luck..
-
var sliderTimer;
//Domready
$(document).ready(function(){
//Slider
var pages = $('#projects ul li').length;
var page = 1;
var pageWidth = 915;
$('#slider-controls').hover(function(){
clearInterval(sliderTimer);
});
$('#slider-controls a.prev').click(function(e){ // als op previous-knop wordt geklikt
e.preventDefault();
if(page > 1) { // als pagina nr hoger is dan 1
$('#projects ul').animate({left: "+=" + pageWidth}, 800, 'swing'); // beweeg links met lengte pagewidth (hier 915)
page --; // en verlaag pagina-teller
//$('#counter').html(page + "/" + pages);
}
});
$('#slider-controls a.next').click(function(e){ // als op next-knop wordt geklikt
e.preventDefault();
if(page < pages) {
$('#projects ul').animate({right: "+=" + pageWidth}, 800, 'swing');
page ++;
//$('#counter').html(page + "/" + pages);
}
if(page == pages) {
$('#projects ul').animate({left: "+=" + (pages*pageWidth)}, 800, 'swing');
page =1;
//$('#counter').html(page + "/" + pages);
}
});
//Timer slider
sliderTimer = setInterval(function(){$('#slider-controls a.next').trigger('click');}, 8000);
}); //Domready end