CODEWITHSUNDEEP
jquerytwitter-bootstrap
StudentRik
StudentRik

Reputation: 1049

Make bootstrap tabs change with carousel

I have been asked to make the active carousel picture change the bootstrap tabs to have the active class as well. I'm not sure how to do this and have tried capturing the active first tab, then i need to iterate over them but not sure how to do this in time with the slider of the carousel. This is where I am:

var activeTab = $('.tabpanel ul li.active');
$('.carousel').on('slide.bs.carousel', function() {
    activeTab.next.addClass('.active');

});

The code just errors in the console.

Upvotes: 1

Views: 773

Answers (2)

DavidG
DavidG

Reputation: 118937

This is how I would achieve it. First get the current index in the carousel, then use that to determine which tab to show. Untested code, but should be enough:

$('.carousel').on('slide.bs.carousel', function() {
    //var index = $('.carousel .active').index('.carousel .item');
    var carouselData = $(this).data('bs.carousel');
    var index = carouselData.getActiveIndex();
    var activeTab = $('.tabpanel ul li.active');
    activeTab.removeClass('.active');
    var tabs = $('.tabpanel ul li');
    tabs[index].addClass('.active');
});

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

next syntax have parenthesis. you missed parenthesis

 activeTab.next().addClass('.active');

Upvotes: 1

Related Questions