Collega due caroselli di Bootstrap su Twitter usando un controllo

Question

Sto solo imparando javascript quindi per favore portami qui. Sto provando ad avviare due caroselli in bootstrap usando lo stesso controllo.

Il modo in cui è impostato in questo momento, tag href contenenti l'ID del carosello sta controllando ogni carosello. Qualcuno ha consigli su come collegarli entrambi usando lo stesso controllo con modifiche minime?

Ecco il codice HTML:

<div id="asHero"> 
       <div id="walkThrough" class="carousel slide"> 
        <!-- Carousel items --> 
        <div class="carousel-inner"> 
         <div class="active item"> 
          <div class="span5"> 
           <h1>Discover</h1> 
           <p class="heroDesc">Explore the active side of the world around you.</p> 
          </div> 
          <div class="span6"> 
           <img src="img/landing/icontest.png" /> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="span5"> 
           <h1>Track</h1> 
           <p class="heroDesc">Keep tabs on frequency and personal bests.</p> 
          </div> 
          <div class="span6"> 
           <img src="img/landing/icontest2.png" /> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="span5"> 
           <h1>Conquer</h1> 
           <p class="heroDesc">Earn points and awards for everything you do in your active life.</p> 
          </div> 
          <div class="span6"> 
           <img src="img/landing/icontest3.png" /> 
          </div> 
         </div> 
        </div> 
        <!-- Carousel nav --> 

        <a class="carousel-control right visible-desktop" href="#walkThrough" data-slide="next">&rsaquo;</a> 
       </div> 
      </div> <!-- /asHero --> 
      <div id="asPhone"> 
       <div id="walkThrough-2" class="carousel slide"> 
        <!-- Carousel items --> 
        <div class="carousel-inner"> 
         <div class="active item"> 
          <div class="span5"> 
           <h1>Discover</h1> 
           <p class="heroDesc">Explore the active side of the world around you.</p> 
          </div> 
          <div class="span6"> 
           <img src="img/landing/icontest.png" /> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="span5"> 
           <h1>Track</h1> 
           <p class="heroDesc">Keep tabs on frequency and personal bests.</p> 
          </div> 
          <div class="span6"> 
           <img src="img/landing/icontest2.png" /> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="span5"> 
           <h1>Conquer</h1> 
           <p class="heroDesc">Earn points and awards for everything you do in your active life.</p> 
          </div> 
          <div class="span6"> 
           <img src="img/landing/icontest3.png" /> 
          </div> 
         </div> 
        </div> 
        <!-- Carousel nav --> 


       </div> 
      </div> <!-- /asPhone --> 

Ecco un link al Javascript: Twitter Bootstrap Carousel JS

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

È possibile accedere ai caroselli utilizzando la classe carousel anziché i propri ID. In questo modo puoi gestire più caroselli con un solo controllo.

aggiungere un pulsante di controllo in più per il modello

<a href="#" class="btn">Next</a> 

e associare un evento click a questo tasto per controllare i caroselli

$('.btn').on('click', function(e) { 
    e.preventDefault() 
    $('.carousel').carousel('next') 
}) 

lo stesso vale per il controllo prev. Per maggiori informazioni dai un'occhiata allo docs.

Answer 2

Questa è una soluzione parziale, sfortunatamente. La ragione è che non vedo alcun modo per capire dall'evento innescato quale direzione sta andando la cosa.

$('#walkThrough').carousel({ 
    interval: 5000 // Slide every 5 seconds 
}); 

$('#walkThrough-2').carousel({ 
    interval: false // This one does not slide on its own 
}); 

$('#walkThrough').bind('slide', function() { 
    $('#walkThrough-2').carousel('next'); 
});