I need to create a custom slider for a website using jquery. So far, I've managed to make it behave the way I want it if I click a button, but I would like to implement an automatic timer, so that the slides will switch after 5 seconds.
Here is my JS code:
function MasterSlider() {
//store the current button ID
var current_button = $(this).attr('id');
//reset all the items
$('#slider ul a').removeClass('slider-button-active');
//set current item as active
$(this).addClass('slider-button-active');
//scroll it to the right position
$('.mask').scrollTo($(this).attr('rel'), 850);
//Check which button is pressed and fade the text accordingly
if(current_button == "slider_item1")
{
$('#slider h3').fadeOut().removeClass('caption_active');
$('#slider_caption1').fadeIn().addClass('caption_active');
}
else if(current_button == "slider_item2")
{
$('#slider h3').fadeOut().removeClass('caption_active');
$('#slider_caption2').fadeIn().addClass('caption_active');
}
else if(current_button == "slider_item3")
{
$('#slider h3').fadeOut().removeClass('caption_active');
$('#slider_caption3').fadeIn().addClass('caption_active');
}
//disable click event
return false;
}
//append click event to the UL list anchor tag
$('#slider ul a').click(MasterSlider);
Thanks in advance!