Twitter Bootstrap Carousel: have carousel-indicators outside Carousel Div

Question

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

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!

Answer 1

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>