Liên kết hai Twitter Bootstrap quay vòng lại với nhau bằng cách sử dụng một điều khiển

Question

Tôi chỉ đang học javascript vì vậy hãy chịu với tôi ở đây. Tôi đang cố gắng để bắt đầu hai carousels trong bootstrap bằng cách sử dụng cùng một điều khiển.

Cách thiết lập ngay bây giờ, thẻ href chứa ID của băng chuyền đang kiểm soát từng băng chuyền. Bất cứ ai cũng có lời khuyên về cách liên kết với nhau bằng cách sử dụng cùng một điều khiển với những sửa đổi tối thiểu?

Đây là 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 --> 

Dưới đây là một liên kết đến Javascript: Twitter Bootstrap Carousel JS

Bất kỳ trợ giúp sẽ được đánh giá cao!

Answer 1

Bạn có thể truy cập băng chuyền bằng cách sử dụng lớp học carousel thay vì ID của họ. Bằng cách này bạn có thể xử lý nhiều băng chuyền với một điều khiển.

Thêm một nút điều khiển thêm cho mẫu của bạn

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

Và ràng buộc một sự kiện click vào nút này để kiểm soát carousels

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

Cũng vậy với các prev kiểm soát. Để biết thêm thông tin, hãy xem docs.

Answer 2

Thật không may, đây là một giải pháp một phần. Lý do là tôi không thể nhìn thấy không có cách nào để tìm ra từ sự kiện được kích hoạt mà hướng điều đang diễn ra.

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