Use a Carousel inside a tab-panel (Bootstrap)

0

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>
    
asked by anonymous 17.12.2015 / 16:54

0 answers