Question

I am looking to have the Twitter Bootstrap tabs change on a timed sequence. I am using them kind of like a carousel. I would like the tabs to change to the next one every 10 seconds.

Here is an example: http://library.buffalo.edu

Click on the news stories to see what I mean. Any help would be appreciated.

Answer 1

Something like this will create a never-ending carousel loop; it will cycle through all tabs and return to the first one after it reaches the last (change #yourTabWrapper to be an appropriate selector for whatever contains your tab markup):

var tabCarousel = setInterval(function() {
    var tabs = $('#yourTabWrapper .nav-tabs > li'),
        active = tabs.filter('.active'),
        next = active.next('li'),
        toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

    toClick.trigger('click');
}, 3000);

All we’re doing is finding the active tab, then triggering the click event on the next tab in the list. If there is no next tab, we trigger the click event on the first tab. Note that the event is actually triggered on the a, not the li.

Now, if you want to add logic to pause or reset the interval when the user either hovers over or manually clicks a tab, that will need to be added separately, and you would use clearInterval(tabCarousel) to stop the cycling.

Here is a basic demo:

— jsFiddle DEMO —