Bootstrap carousel indicators > active indicator wont change

Question

I've used the "out the box carousel indicators" you get with bootstrap as a way of displaying small thumbnails of all the slides coming up. It works well, however, unlike the "out the box indicator dots", the active li does not change to active - therefore I cant apply css style to the active thumbnail. Below is the out the box compared to my alternate version.

            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>


            <ol class="carousel-preview hidden-phone pull-right">
                <li data-target="#myCarousel" data-slide-to="0" class="active"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
                <li data-target="#myCarousel" data-slide-to="1"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
                <li data-target="#myCarousel" data-slide-to="2"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
                <li data-target="#myCarousel" data-slide-to="3"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
            </ol>

I don't think removing the carousel-indicators class has anything to do with it as I replicated that, and it still has the active class associated. I'm guessing its a bootstrap JS file I need to amend? I tired to mock up a bootply example but too much custom styleing needed to be done to replicate.

When you inspect element on the indicators you can see the active class jumping from one li to the other but it wont do that for my indicators, any ideas why would be appreciated!

We would really need to see the code, can you provide an js fiddle? — JonathanRomer

Tom Rudge Tom Rudge · Accepted Answer · 2013-06-21T09:01:33

line 290 in the bootstrap.js file I needed to add my class .carousel-preview - I left .carousel-indicators so that the original indicators worked.

              var Carousel = function (element, options) {
                this.$element = $(element)
                this.$indicators = this.$element.find('.carousel-indicators, .carousel-preview')
                this.options = options
                this.options.pause == 'hover' && this.$element
                  .on('mouseenter', $.proxy(this.pause, this))
                  .on('mouseleave', $.proxy(this.cycle, this))
              }

Bootstrap carousel indicators > active indicator wont change

2 Answers