How to autoplay a jquery slider?

Question

I have a Very fine working jquery code for a slider in a web page. Its completely functional with all working navigations.The problem is i cant get it to autoplay. Please tell me how can i modify or add something to this code to make it autoplay.

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

$('#button-next').click(function(){

$('.active').removeClass('active').addClass('oldActive');    
               if ( $('.oldActive').is(':last-child')) {
    $('.sp').first().addClass('active');
    }
    else{
    $('.oldActive').next().addClass('active');
    }
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();


});

   $('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');    
       if ( $('.oldActive').is(':first-child')) {
    $('.sp').last().addClass('active');
    }
       else{
$('.oldActive').prev().addClass('active');
       }
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});


}); 

Answer 1

It may not answer your question, but this site may make your job easier. You need to include just two jquery files and by changing their properties you can create different types of image slides.

For more Read here: http://www.slidesjs.com/

Answer 2

I would advise you to make functions that get the next and previous slide. After doing that you can easily set a timeout for your next function. Below code isn't tested but should be close to what you can use in your application:

$(document).ready(function(){
    $('.sp').first().addClass('active');
    $('.sp').hide();    
    $('.active').show();

    $('#button-next').click(function(){
        next();
    });

   $('#button-previous').click(function(){
       previous();
   });

    setTimeout(next,5000);
}); 

function next() {   
    $('.active').removeClass('active').addClass('oldActive');    
    if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
    }
    else{
        $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
}

function previous() {
    $('.active').removeClass('active').addClass('oldActive');    
    if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
    }
    else{
        $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
}