Looking for some inspiration? Check out the basic visuals for this question here. But let me break it down for you.
This snippet shows the HTML & CSS behind a tabbed-carousel, with a condensed version for clarity:
<style>
#myCarousel-100 .nav a small {
display:block;
}
#myCarousel-100 .nav {
background:#eee;
}
#myCarousel-100 .nav a {
border-radius: 0px;
}
</style>
<div class="container">
<div id="myCarousel-100" class="carousel slide" data-ride="carousel">
<div class="carousel-inner"><!-- Wrapper for slides -->
<div class="item active">
panel 1 content
</div><!-- End Item -->
<div class="item active">
panel 2 content
</div><!-- End Item -->
</div><!-- /Wrapper for slides -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel-100" data-slide-to="0" class="active"><a href="#">panel 1</a></li>
<li data-target="#myCarousel-100" data-slide-to="1"><a href="#">panel 2</a></li>
</ul>
</div><!-- End Carousel -->
</div>
Doesn't get any simpler than that. To make it work, just add the following JS to the footer along with Bootstrap & jQuery:
<script>
$('#myCarousel-100').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel-100').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').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
</script>
That's all there is to it. No problem here, right?
Actually... maybe. If you try to set up another instance with an id like myCarousel-200 and duplicate the code, changing the IDs accordingly, you'll notice a glitch.
When clicking on one carousel, the clicked-appearance of the other carousel's item also changes. This isn't ideal.
The issue lies in the JS calls like:
$('.nav li').removeClass('active');
To fix this, I attempted:
$('#myCarousel .nav li').removeClass('active');
But no luck. What am I missing?