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 bees 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?
    });
});

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 bees 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?
    });
});

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-3
• carousel

Share Improve this question Follow edited Feb 24, 2014 at 7:47 Suhaib Janjua 3,5721616 gold badges6969 silver badges8787 bronze badges asked Feb 24, 2014 at 7:34 Geoffrey De SmetGeoffrey De Smet 27.4k1313 gold badges7777 silver badges123123 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I hope this way could help you :

Bootply : http://www.bootply./116312

Js :

$(document).ready( function() {
    $('.carousel').carousel();
    $('#whatIsCarousel').on('slide.bs.carousel', function(e) {
        var from = $('.nav li.active').index();
        var next = $(e.relatedTarget);
        var to =  next.index();

        // This could interest you
        $('.nav li').removeClass('active').eq(to).addClass('active');

    });
});

Focus on :

$('.nav li').removeClass('active').eq(to).addClass('active');

You remove active class from all tabs, and add it to the tabs that has the same index.

try this

$(document).ready( function() {
    $('#myCarousel').carousel({
        interval:   4000
    });

    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav li').length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to')) +1;
            if(count+1 == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
    });
});