Question

So, I have these 3 tabbed sections that show and hide onClick, but now I want them to also act like a slideshow if the user doesn’t click anywhere.

Here is what I have:

$(document).ready(function() {
    function rClass() {
        $('.slide_1_link').removeClass('on');
        $('.slide_2_link').removeClass('on');
        $('.slide_3_link').removeClass('on');
    }
    function rFadeOut() {
        $('.slide_1').fadeOut();
        $('.slide_2').fadeOut();
        $('.slide_3').fadeOut();

        $('.slide_content_1').fadeOut();
        $('.slide_content_2').fadeOut();
        $('.slide_content_3').fadeOut();
    }
    $('.slide_1_link').click(function(){
        rClass();
        rFadeOut();
        $('.slide_1_link').addClass('on');
        $('.slide_1').fadeIn();
        $('.slide_content_1').fadeIn();
    });
    $('.slide_2_link').click(function(){
        rClass();
        rFadeOut();    
        $('.slide_2_link').addClass('on');
        $('.slide_2').fadeIn();
        $('.slide_content_2').fadeIn();
    });
    $('.slide_3_link').click(function(){
        rClass();
        rFadeOut();
        $('.slide_3_link').addClass('on');
        $('.slide_3').fadeIn();
        $('.slide_content_3').fadeIn();
    });

});

Does anybody know a good timer plugin or an easy way to implement that functionality?

Thanks for your time!

Answer 1

You could write a function to trigger the click events on the three links in turn, and then set that to run every 5 seconds using setInterval like so:

var cycleIndex = 0;

function cycle() {
    var index = cycleIndex % 3;
    $('.slide_' + (index + 1) + '_link').click();
    cycleIndex += 1;
}

setInterval(cycle, 5000);