Change Twitter Bootstrap tabs automatically

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

one way of catching the hover event. it really depends on what element you are trying to catch to stop the cycling. the tabs or the tab content. this hooks to the tabs.

$('.tabbable .nav-tabs > li').hover(function(){
  clearInterval(tabCarousel);
});

Answer 2

Control user frequently clicks on navs manually, Here is a fiddle try to click multiple time on navs

    // 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);
            // Start the cycle again in a predefined amount of time
            $(this).tab('show')
            setTimeout(function(){
              // Stop the cycle here too because if user clicked on tabs frequently then setTimeout function called too manny time  
                clearInterval(tabCycle);
                tabCycle = setInterval(tabChange, 5000)
            }, 15000);
        });
    });
    
    // 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');
        next.tab('show')
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav nav-pills nav-tabs nav-stacked">
  <li class="active"><a href="#t1">Home</a></li>
  <li><a href="#t2">Menu 1</a></li>
  <li><a href="#t3">Menu 2</a></li>
  <li><a href="#t4">Menu 3</a></li>
</ul>

Answer 3

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 ---

Answer 4

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);
        });
    });

Answer 5

Another nice option is to pause the slideshow when a tab is clicked:

// 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
$(this).find('.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);
    }, 15000);
});

Answer 6

I have added the clock to the Pallab's code. So that even if different tabs are clicked before the timeout period which is 10 seconds in my case the current tab will be shown for 10 seconds and tabs will automatically tab after 5 seconds. I am a beginner so please bear with my coding.

You have to click 2 or more tabs , one tab at at a time , in less than 10 seconds

// Tab-Pane change function

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
function settabchnge () {
    //alert("in set tab");
tabCycle = setInterval(tabChange, 5000);
}

settabchnge();

function cleartabchange () {
    clearInterval(tabCycle);
}

$(function(){

    var counterofclock = 1;
    var counterofmoreclicks = 1; 
    var clicked = false;
    var sec = 0;
    function startClock() {
        if (clicked === false) {
            clock = setInterval(stopWatch, 1000);
            clicked = true;
        }else if (clicked === true) {
        }
    }       
    function stopWatch() {
            sec++;
    }
    function stopClock() {
            window.clearInterval(clock);
            sec = 0;
            clicked = false;
    }
    $('.nav-tabs a').click(function(e) {
        if(counterofclock === 1){
            startClock();
            counterofclock = 2;
        }else {
            stopClock();
            startClock();
        }
        e.preventDefault();
        // Stop the cycle
        if (counterofmoreclicks == 2 && sec < 11){
            clearTimeout(starttabchnage);
        }
        counterofmoreclicks = 2;
        clearInterval(tabCycle);
        // Show the clicked tabs associated tab-pane
        $(this).tab('show')
        // Start the cycle again in a predefined amount of time
        starttabchnage = setTimeout(function(){ settabchnge();}, 10000);
    });


})