ट्विटर बूटस्ट्रैप कैरोसेल: कैरोसेल डिवी

Question

के बाहर कैरोसेल-संकेतक हैं क्या कैरोसेल डिव के बाहर कैरोसेल-संकेतक सूची संभव है? और नीचे, मैं पूछ रहा हूं कि पूरे पृष्ठ को विशिष्ट तत्वों के लिए उनसे जुड़ी कक्षा के साथ खोजना संभव है या नहीं।

<div id="presentation" class="tab-pane active"> 
    <div id="presentationCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"><img src="...1.jpg" alt="" /></div> 
      <div class="item active"><img src="...2.jpg" alt="" /></div> 
      <div class="item active"><img src="...3.jpg" alt="" /></div> 
     </div> 
     <a class="carousel-control left" href="#presentationCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#presentationCarousel" data-slide="next">&rsaquo;</a> 
    </div> 
</div> 

<div id="chapterList"> 
    <ol class="carousel-indicators"> 
     <li data-target="#presentationCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#presentationCarousel" data-slide-to="1"></li> 
     <li data-target="#presentationCarousel" data-slide-to="3"></li> 
    </ol> 
</div> 

क्या यह संभव है:

मैं कुछ इस तरह की कल्पना कर रहा हूँ?

बस को जोड़ने के लिए, मैं बूटस्ट्रैप जे एस स्रोत की जाँच की और इस लाइन पाया:

this.$indicators = this.$element.find('.carousel-indicators') 

यह सिर्फ सूची संकेतक भरता है। मुझे लगता है कि यह संदर्भ प्रस्तुति div element के लिए संदर्भ है।

JAVASCRIPT प्रश्न

यह संभव इस संदर्भ को हटाने के द्वारा तत्वों के लिए पूरे पृष्ठ खोज करने के लिए है?

this.$indicators = $element.find('.carousel-indicators') 

सलाह का कोई भी टुकड़ा अत्यधिक सराहना की जाएगी। धन्यवाद!

Answer 1

इस समस्या के समाधान के रूप में आप स्लाइड्स से कक्षा = "सक्रिय" (और वर्ग = "") को प्रत्येक स्लाइड और प्रत्येक सूचक को एक आईडी निर्दिष्ट करके अपने संकेतकों को प्रतिलिपि बना सकते हैं।

function navFunction() { 
    setTimeout(function() { 
     $("#ind-1").attr("class", $("#slide-1").attr("class")); 
     $("#ind-3").attr("class", $("#slide-2").attr("class")); 
     $("#ind-3").attr("class", $("#slide-3").attr("class")); 
    }, 800); 
}; 

फिर बाएं या दाएं बटन क्लिक पर स्क्रिप्ट navFunction() को कॉल करें। यह काम उन स्लाइड तक ही सीमित है जो ऑटो स्क्रॉल का उपयोग नहीं करते हैं।

Answer 2

यह बाएं/दाएं बटन क्लिक और ऑटोस्कोलिंग कैरोसेल दोनों के साथ काम करता है।

$(document).ready(function() {   
    $('#presentation').carousel({ 
     interval: 8000 
    }).bind('slide', function() { 
     navFunction(); 
    }).carousel('cycle'); 
}); 

function navFunction() { 
    setTimeout(function() { 
     $("#ind-1").attr("class", $("#slide-1").attr("class")); 
     $("#ind-2").attr("class", $("#slide-2").attr("class")); 
     $("#ind-3").attr("class", $("#slide-3").attr("class")); 
     $("#ind-4").attr("class", $("#slide-4").attr("class")); 
     $("#ind-5").attr("class", $("#slide-5").attr("class")); 
    }, 800); 
}; 

Answer 3

मैंने पाया कि बूटस्ट्रैप से हिंडोला() फ़ंक्शन का उपयोग सबसे अच्छा काम किया है क्योंकि आपके द्वारा निर्दिष्ट जो DIV हिंडोला होना चाहिए। कैरोसेल वर्ग की सापेक्ष स्थिति होनी चाहिए, लेकिन मैं चाहता था कि मेरे संकेतक पृष्ठ के बहुत नीचे पर पूर्ण स्थिति रखें और न केवल कैरोसेल के नीचे।

मैं सेट अप इस तरह एचटीएमएल कोड:

$('#gallery').carousel({ 
    interval: 2000, 
    pause: "hover", 
    wrap: true 
}); 

:

<div id="galleryCarousel" class="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/photos/IMG_1937_8_9_tonemapped-X3.jpg" alt="Dish"> 
     <div class="carousel-caption"> 
     Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio 

     </div><!--end caption--> 
    </div><!--end item--> 

    <div class="item"> 
     <img src="images/photos/IMG_1961_2_3_tonemapped-X2.jpg" alt="Dish" class="portrait"> 
     <div class="carousel-caption"> 
     Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit 

     </div><!--end caption--> 
    </div><!--end item--> 


    </div><!--end carousel-inner--> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#gallery" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#gallery" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 



</div> <!--END carousel--> 

<div class="col-xs-6 picName"> 
    other stuff 
    </div> 

    <div class="col-xs-6"> 
    other stuff 
    </div> 

     <ol class="carousel-indicators col-xs-12"> 
     <li data-target="#gallery" data-slide-to="0" class="active"><div><img src="images/photos/small/IMG_1937_8_9_tonemapped-X3.jpg" alt="Goldstone, California Facility Images"></div>Goldstone Antenna at...</li> 
     <li data-target="#gallery" data-slide-to="1"><div><img src="images/photos/small/IMG_1961_2_3_tonemapped-X2.jpg" alt="Image 2"></div>Image 2</li> 

     </ol> 
    </div><!--END gallery--> 

अपने ही जे एस फ़ाइल में, मैं निम्नलिखित कोड किया

मैं डी आईडी बूटस्ट्रैप फ़ाइल को बिल्कुल स्पर्श नहीं करता है। जो भी डीआईवी आप कैरोसेल बनना चाहते हैं उसे असाइन करने के लिए "स्लाइड" कक्षा महत्वपूर्ण है ताकि यह एनीमेशन करे।

Answer 4

पार्टी के देर से बिट लेकिन आप इस तरह की एक स्क्रिप्ट जोड़ने का प्रयास कर सकते हैं ...

$('#myCarousel').on('slide.bs.carousel', function() {  

$holder = $("ol li.active"); 
$holder.next("li").addClass("active"); 
if($holder.is(':last-child')) 
{ 
$holder.removeClass("active"); 
$("ol li:first").addClass("active"); 
} 
$holder.removeClass("active"); 
}) 
</script> 

Answer 5

मैं कुछ सार्वभौमिक कोड लिखा है, तो हम पृष्ठ के किसी भी जगह में carousel-indicators डाल सकते हैं।

$(document).ready(function() { 
    $('div[data-ride="carousel"]').each(function() { 
     var $carousel = $(this); 
     var id = this.id; 
     var relatedIndicators = $('li[data-target="#'+id+'"]'); 
     $carousel.on('slid.bs.carousel', function (e) { 
      var index = $carousel.find('.carousel-inner .item').index($carousel.find('.carousel-inner .active')); 
      relatedIndicators.removeClass('active'); 
      relatedIndicators.filter('[data-slide-to="'+ index +'"]').addClass('active'); 
     }); 
    }); 
});