Cambia automaticamente le schede di Bootstrap di Twitter

Question

Sto cercando di modificare le schede di Bootstrap di Twitter in una sequenza temporale. Li sto usando come una giostra. Vorrei che le schede passassero a quella successiva ogni 10 secondi.

Ecco un esempio: http://library.buffalo.edu

Clicca sulle notizie per vedere quello che voglio dire. Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Qualcosa di simile creerà un loop continuo di carosello; lo farà scorrere tutte le schede e tornare alla prima dopo aver raggiunto l'ultimo (cambiare #yourTabWrapper essere un apposito selettore per qualunque contiene la scheda 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); 

Tutto quello che stiamo facendo è trovare la scheda attiva , quindi attivando l'evento click nella scheda successiva nell'elenco. Se è nessuna scheda successiva, attiviamo l'evento click nella prima scheda. Si noti che l'evento è effettivamente attivato su a, non su li.

Ora, se si desidera aggiungere la logica per mettere in pausa o ripristinare l'intervallo quando l'utente si posiziona sopra o fa clic manualmente su una scheda, sarà necessario aggiungerlo separatamente e si utilizzerà clearInterval(tabCarousel) per interrompere il ciclo.

Ecco una demo di base:

--- jsFiddle DEMO ---

Answer 2

un modo di catturare l'evento hover. dipende davvero da quale elemento stai cercando di catturare per fermare il ciclismo. le schede o il contenuto della scheda. questo si aggancia alle schede.

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

Answer 3

Un'altra opzione interessante è di mettere in pausa la presentazione quando una scheda viene cliccato:

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

fissa la soluzione 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

ho aggiunto l'orologio al codice del Pallab. In questo modo, anche se si fa clic su diverse schede prima del periodo di timeout che è 10 secondi nel mio caso, la scheda corrente verrà visualizzata per 10 secondi e le schede verranno automaticamente visualizzate dopo 5 secondi. Sono un principiante quindi per favore porta con me la mia programmazione.

dovete cliccare 2 o più schede, una scheda a alla volta, in meno di 10 secondi

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

utente di controllo fa clic spesso navigatori manualmente, ecco un fiddle provate a cliccare il tempo multipla 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>