How to make Bootstrap 3 carousel indicators change immediately

Question

If you look at the carousel on Bootstrap's own example, the indicator changes immediately (ie the indicator changes at the beginning of the transition, and not at the end.)

However, if you look at the my version of the carousel, the indicator changes when the slide transition has finished. (The only difference between mine and the example, that I know of, is that it's in a container so it doesn't spread across the whole page, saw a lot of other examples using one like this.)

I can't work out how to get the indicator to change immediately like the example, hopefully someone can let me know where I'm going wrong. I can imagine it'll be something simple that I'm overlooking..

Bootstrap example - http://getbootstrap.com/examples/carousel/

My test version - http://samtodd.co.uk/carousel-test.html

Answer 1

That is because you are using ver 3.1.1 of bootstrap while the example on the bootstrap site is using the latest 3.2.0 version.

On the version 3.1.1, indicators are changed on the "slid" event, while on the ver 3.2.0, indicators are changed on the "slide".

slid event -> when sliding is finished

slide event -> when sliding is just starting

Easiest would be to update to 3.2.0!

Hope that helps!