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 the class "active" is added by default to slide 1 which then changes as the active slide changes. what i want to do is have this happen for the bullets too. i have made the first one active but want the second one to become active if the slide itself is on slide 2, etc etc

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

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

Comments

[manc]

thanks so much dan. great code and doesn't take up much room, and can apply to multiple sliders. +1!!!