Połącz dwa karuzele na Twitterze z Bootstrap, używając jednej kontrolki.

Question

Uczę się właśnie javascript, więc proszę o zachowanie mnie tutaj. Próbuję zainicjować dwa karuzele w bootstrapie używając tej samej kontroli.

Sposób, w jaki jest teraz skonfigurowany, tagi href zawierające identyfikator karuzeli kontrolują każdą karuzelę. Czy ktoś ma porady, jak połączyć oba elementy za pomocą tej samej kontrolki z minimalnymi modyfikacjami?

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

Oto link do javascript: Twitter Bootstrap Carousel JS

Każda pomoc będzie bardzo mile widziane!

Answer 1

Dostęp do karuzeli można uzyskać, używając ich klasy carousel zamiast ich identyfikatorów. W ten sposób możesz obsługiwać wiele karuzel z jednym sterowaniem.

dodać dodatkowy przycisk sterujący do szablonu

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

i powiązać zdarzenie click do tego przycisku do sterowania karuzele

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

To samo dotyczy kontroli prev. Aby uzyskać więcej informacji, spójrz na docs.

Answer 2

To jest częściowe rozwiązanie, niestety. Powodem jest to, że nie widzę sposobu, aby dowiedzieć się od wyzwolonego wydarzenia, w którym kierunku idzie ta rzecz.

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