Change Twitter Bootstrap tabs automatically

user_1467507 0
Viewed 13260

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.

twitter-bootstrap tabs jquery javascript
6 Answers

Fixed the AppSol solution:

// Tab-Pane change function
    var tabChange = function(){
        var tabs = $('.nav-tabs > li');
        var active = tabs.filter('.active');
        var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
        // Use the Bootsrap tab show method
        next.tab('show')
    }
    // Tab Cycle function
    var tabCycle = setInterval(tabChange, 5000)
    // Tab click event handler
    $(function(){
        $('.nav-tabs a').click(function(e) {
            e.preventDefault();
            // Stop the cycle
            clearInterval(tabCycle);
            // Show the clicked tabs associated tab-pane
            $(this).tab('show')
            // Start the cycle again in a predefined amount of time
            setTimeout(function(){
                tabCycle = setInterval(tabChange, 5000)
            }, 30000);
        });
    });
user_26601040
Related