Link zu zwei Twitter Bootstrap Karussells zusammen mit einer Steuer

Question

Ich bin nur Javascript Lernen so tragen Sie bitte mit mir hier. Ich versuche, zwei Karussells im Bootstrap mit dem gleichen Steuerelement zu initiieren.

So wie es Setup ist jetzt, href-Tags der Karussell ID enthält, wird jedes Karussell zu steuern. Hat jemand Tipps, wie man beide mit der gleichen Steuerung mit minimalen Änderungen verbinden kann?

Hier ist der 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 --> 

Hier ist ein Link auf die Javascript: Twitter Bootstrap Carousel JS

Jede Hilfe wäre sehr dankbar!

Answer 1

Sie können die Karusselle Zugriff auf ihre Klasse mit carousel statt ihrer IDs. Auf diese Weise können Sie mehrere Karussells mit einem Steuerelement verwalten.

einen zusätzlichen Steuerknopf zu Ihrer Vorlage hinzufügen

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

und binden ein Click-Ereignis auf diese Schaltfläche, um die Karussells zu steuern

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

Gleiches gilt für die prev Kontrolle gerät. Weitere Informationen finden Sie unter docs.

Answer 2

Dies ist eine Teillösung, leider. Der Grund dafür ist, dass ich keine Möglichkeit sehe, aus dem ausgelösten Ereignis herauszufinden, in welche Richtung das Ding geht.

$('#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'); 
});