Cambiar las pestañas Twitter Bootstrap automáticamente

Question

Estoy buscando que las pestañas Twitter Bootstrap cambien en una secuencia temporizada. Los estoy usando como un carrusel. Me gustaría que las pestañas cambien a la siguiente cada 10 segundos.

Aquí se muestra un ejemplo: http://library.buffalo.edu

Haga clic en las noticias para ver lo que quiero decir. Cualquier ayuda sería apreciada.

Answer 1

Algo así creará un ciclo continuo de carrusel; se hará un ciclo a través de todas las pestañas y volver a la primera después de que llegue a la última (cambiar #yourTabWrapper ser un selector apropiado para lo que contiene la pestaña de marcado):

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

Todo lo que hacemos es encontrar la pestaña activa , desencadenando el evento click en la siguiente pestaña de la lista. Si hay es sin pestaña siguiente, activamos el evento click en la primera pestaña. Tenga en cuenta que el evento realmente se desencadena en el a, no en el li.

Ahora, si desea agregar lógica para pausar o restablecer el intervalo cuando el usuario pasa el mouse o hace clic manualmente en una pestaña, deberá agregarse por separado, y usaría clearInterval(tabCarousel) para detener el ciclo.

Aquí es una demostración básica:

--- jsFiddle DEMO ---

Answer 2

una forma de controlar el evento de vuelo estacionario. realmente depende de qué elemento estés tratando de atrapar para detener el ciclismo. las pestañas o el contenido de la pestaña. esto engancha a las pestañas.

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

Answer 3

Otra buena opción es hacer una pausa la presentación de diapositivas cuando se hace clic en una pestaña:

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

fija de la solución AppSol:

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

he añadido el reloj al código del Pallab. De modo que, incluso si se hacen clic en diferentes pestañas antes del período de tiempo de espera, que es de 10 segundos, en mi caso, la pestaña actual se mostrará durante 10 segundos y las pestañas se desplazarán automáticamente después de 5 segundos. Soy un principiante así que por favor tenga paciencia con mi codificación.

hay que hacer clic 2 o más pestañas, una pestaña en cada vez, en menos de 10 segundos

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


}) 

Answer 6

usuario de Control hace clic con frecuencia en navs manualmente, aquí es una oportunidad fiddle hacer clic en el tiempo múltiples en 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>