Bootstrap Carousel Number active icon

Question

I have been able to implement the Bootstrap carousel complete with icons to represent slides 1-3 in this example: http://jsfiddle.net/alexmoss/QzVq8/

I notice that t

Answer 1

Basically worked out the index of the currently shown slide, then used that index to apply the 'active' class to the respective navigation button.

$('#myCarousel').bind('slid', function() {
    // Get currently selected item
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#carousel-nav a').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#carousel-nav a:nth-child(' + index + ')').addClass('active');
});

You can clearly optimise the code to use less variables. However, I've deliberately expanded it so that you understand what's going on.

Answer 2

You need to bind 'slid' event of carousel. More details are here --> How to attach "slide" & "slid" events to the Bootstrap toolkit's carousel?