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!

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!

• javascript
• jquery
• razor
• twitter-bootstrap
• carousel

• what do you want to do with .carousel-indicators once thay have been found? – darshanags Commented Mar 10, 2013 at 3:10
• 1 just the default behavior of the Bootstrap carousel indicator. a reference for each image. right now it works fine if the .carousel-indicators are in the same div. i'm asking if it will still work fine outside. – AnimaSola Commented Mar 10, 2013 at 5:27

6 Answers 6

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>

I've written some universal code, so we can put carousel-indicators in any place of the page.

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

I will simply go with slide event:

$('.carousel').on('slide.bs.carousel', function (e) {
  var indicator = $('[data-target="#'+this.id+'"]');
  var index = $(e.relatedTarget).index();
  indicator.removeClass('active');
  indicator.filter('[data-slide-to="'+ index +'"]').addClass('active');
})

As a workaround to this issue you can copy the class="active" (and class="") from the slides to your indicators by assigning each slide and each indicator an id.

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);
};

Then call the script navFunction() on the left or right button clicks. This work around is limited to slides that don't use auto scroll.

This works with both left/right button clicks and autoscrolling carousel.

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

I found that using the carousel() function from bootstrap worked the best because you specify which DIV should be the carousel. The carousel class needs to have relative position but I wanted my indicators to have absolute positioning at the very bottom of the page and not just the bottom of the carousel.

I set-up the HTML code like this:

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

In my own JS file, I did the following code:

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

I did not touch the bootstrap file at all. The "slide" class is important to assign to whatever DIV you want to be the carousel so that it does the animation.