Twitter Bootstrap Carousel: have carousel-indicators outside Carousel Div
carousel, javascript, jquery, razor, twitter-bootstrap
Solution
Bit late to the party but you could try adding a script like this...
$('#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>
Problem
Is it possible to have the carousel-indicators list outside the Carousel Div? And at the bottom, I'm asking if it's possible to search the entire page for specific elements with a class tied to them. I'm imagining something like this: ``` <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">‹</a> <a class="carousel-control right" href="#presentationCarousel" data-slide="next">›</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> ``` Is it possible? Just to add, I checked out the bootstrap JS source and found this line: ``` this.$indicators = this.$element.find('.carousel-indicators') ``` It just populates the list indicators. I imagine the this reference is for the presentation div element. JAVASCRIPT QUESTION Is it possible to search the entire page for elements by removing the this reference? ``` this.$indicators = $element.find('.carousel-indicators') ``` Any piece of advise would be highly appreciated. Thanks!