I have a Twitter Bootstrap 3 carousel without indicator buttons.
Instead of those indicator buttons, I use tabs (which I style accordingly in my CSS).
This way, the user has an idea what each slide is (based on the tab label), so it's easier for him to go to the slide he's interested in.

The HTML looks like this:

<div class=carousel slide data-ride=carousel id=whatIsCarousel>

    <div class=carousel-inner>

        <div class=item active>

            <img src=slide0.png>

        </div>

        <div class=item>

            <img src=slide1.png>

        </div>

        ...

    </div>

    <a class=left carousel-control data-slide=prev href=#whatIsCarousel>

        <span class=glyphicon glyphicon-chevron-left></span>

    </a>

    <a class=right carousel-control data-slide=next href=#whatIsCarousel>

        <span class=glyphicon glyphicon-chevron-right></span>

    </a>

</div>

<ul class=nav nav-justified id=whatIsCarouselButtons>

    <li class=active data-target=#whatIsCarousel data-slide-to=0>

        <a data-toggle=tab href=#>Slide 0</a>

    </li>

    <li data-target=#whatIsCarousel data-slide-to=1>

        <a data-toggle=tab href=#>Slide 1</a>

    </li>

    ...

</ul>

The CSS is irrelevant, but source code is here.

The tabs works well: When I click on one of the tabs, the carousel slides to the appropriate slide, and the correct tab becomes active (highlights).

The carousel controls (left and right) work partially: when I click on one of the controls (or it slides automatically), the carousel slides to the appropriate slide, but the active tab does not change. How do I make the active tab change when the carousel slides?

Here's what I got so far in my javascript:

$(document).ready( function() {

    $carousel.carousel();

    $('#whatIsCarousel').on('slide.bs.carousel', function(e) {

        var from = active.index();

        var next = $(event.relatedTarget);

        var to = next.index();



        // Is to the index of the next slide?

        // How do I find tab that needs to be active next?

    });

});