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>