एक ट्विटर का उपयोग कर दो ट्विटर बूटस्ट्रैप कैरोलल्स को एक साथ लिंक करें

Question

मैं सिर्फ जावास्क्रिप्ट सीख रहा हूं इसलिए कृपया यहां मेरे साथ भालू। मैं एक ही नियंत्रण का उपयोग कर बूटस्ट्रैप में दो कैरोसेल शुरू करने की कोशिश कर रहा हूं।

जिस तरह से यह अभी सेटअप है, कैरोसेल की आईडी वाला href टैग प्रत्येक कैरोसेल को नियंत्रित कर रहा है। किसी को भी कम से कम संशोधनों के साथ एक ही नियंत्रण का उपयोग करके दोनों को एक साथ जोड़ने के बारे में सलाह है? Twitter Bootstrap Carousel JS

किसी भी मदद की बहुत सराहना की जाएगी:

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

यहाँ जावास्क्रिप्ट के लिए एक लिंक है:

यहाँ एचटीएमएल है!

Answer 1

आप अपने आईडी के बजाय अपनी कक्षा carousel का उपयोग कर कैरोलल्स तक पहुंच सकते हैं। इस तरह आप एक नियंत्रण के साथ कई कैरोलल्स संभाल सकते हैं।

इस बटन के लिए क्लिक करें घटना अपने टेम्पलेट

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

के लिए एक अतिरिक्त नियंत्रण बटन जोड़ें और बाँध carousels

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

ही prev नियंत्रण के लिए चला जाता है को नियंत्रित करने के। अधिक जानकारी के लिए docs पर एक नज़र डालें।

Answer 2

दुर्भाग्य से यह आंशिक समाधान है। कारण यह है कि मैं ट्रिगर किए गए कार्यक्रम से पता लगाने का कोई तरीका नहीं देख सकता हूं, जिस दिशा में यह बात चल रही है।

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