Good afternoon!
I'm trying to implement a carousel inside a tab-panel; however, both use the "active" notation in the class to determine which item will appear.
So, when I select the desired tab, it is displayed with all carousel items, any idea how to resolve this conflict?
Link to see what's happening: link
By clicking on the first item "Curtains"
Javascript:
$('#myCarousel').carousel({
interval: false
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
html:
<ul class="nav navbar-nav navbar-center nav-pills">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="active">
<a data-toggle="pill" class="page-scroll" href="#todas">Todas</a>
</li>
<li>
<a data-toggle="pill" class="page-scroll" href="#varao">Varão</a>
</li>
<li>
<a data-toggle="pill" class="page-scroll" href="#trilho">Trilho</a>
</li>
<li>
<a class="page-scroll" href="#" data-dismiss="modal">Fechar Galeria</a>
</li>
</ul>
<div class="row tab-pane fade in active" id="todas">
<!-- thumb navigation carousel -->
<div class="col-sm-2 hidden-sm hidden-xs" id="slider-thumbs">
<!-- thumb navigation carousel items -->
<ul class="list-inline mCustomScrollbar" data-mcs-theme="dark-3" id="Grid">
<li class="hvr-pulse-grow"> <a id="carousel-selector-0" class="selected">
<img src="modal/cortinas/1.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow"> <a id="carousel-selector-1">
<img src="modal/cortinas/2.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-2">
<img src="modal/cortinas/3.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-3">
<img src="modal/cortinas/4.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-4">
<img src="modal/cortinas/5.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-5">
<img src="modal/cortinas/6.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-6">
<img src="modal/cortinas/7.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-7">
<img src="modal/cortinas/8.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-8">
<img src="modal/cortinas/9.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="hvr-pulse-grow "> <a id="carousel-selector-9">
<img src="modal/cortinas/10.jpg" class="img-responsive" alt="Cortina">
</a></li>
<li class="gap"></li>
</ul>
</div>
<!-- main slider carousel -->
<div class="col-sm-10 col-md-10 col-lg-10" id="slider">
<div class="col-sm-10 col-md-10 col-lg-10" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="item" data-slide-number="0">
<a href="modal/cortinas/1.jpg" data-lightbox="image-1"><img src="modal/cortinas/1.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="1">
<a href="modal/cortinas/2.jpg" data-lightbox="image-2"><img src="modal/cortinas/2.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="2">
<a href="modal/cortinas/3.jpg" data-lightbox="image-3"><img src="modal/cortinas/3.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="3">
<a href="modal/cortinas/4.jpg" data-lightbox="image-4"><img src="modal/cortinas/4.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="4">
<a href="modal/cortinas/5.jpg" data-lightbox="image-5"><img src="modal/cortinas/5.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="5">
<a href="modal/cortinas/6.jpg" data-lightbox="image-6"><img src="modal/cortinas/6.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="6">
<a href="modal/cortinas/7.jpg" data-lightbox="image-7"><img src="modal/cortinas/7.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="7">
<a href="modal/cortinas/8.jpg" data-lightbox="image-8"><img src="modal/cortinas/8.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="8">
<a href="modal/cortinas/9.jpg" data-lightbox="image-9"><img src="modal/cortinas/9.jpg" class="img-responsive" alt="Cortina"></a>
</div>
<div class="item" data-slide-number="9">
<a href="modal/cortinas/10.jpg" data-lightbox="image-10"><img src="modal/cortinas/10.jpg" class="img-responsive" alt="Cortina"></a>
</div>
</div>
<!-- main slider carousel nav controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<i class="fa fa-chevron-left fa-3x text-primary control hidden-xs hidden-sm hvr-bounce-in"></i>
<i class="fa fa-chevron-left fa-lg text-primary control hidden-lg hidden-md hvr-bounce-in"></i>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<i class="fa fa-chevron-right fa-3x text-primary control hidden-xs hidden-sm hvr-bounce-in"></i>
<i class="fa fa-chevron-right fa-lg text-primary control hidden-lg hidden-md hvr-bounce-in"></i>
</a>
</div>
</div>
</div> <!-- fim da row de todas -->
</div>