ブートストラップネストされたカルーセルアクティブコントロール

Question

ブートストラップネストされたカルーセルに問題があります。 インターナショナルカルーセルをクリックすると、正しくない外部カルーセルのアクティブなLiも変化します。

また、エクセルカルーセルコントロールをクリックすると、インターナショナルカルーセルはもはや動作しません。

誰でも手助けできますか？基本的には、ネストされたカルーセルは、以下の例のように（i」は、（私のために働いていた）github

に関する詳細な情報を見つけること、サポートされていません。しかし、あなたは、いくつかの問題を回避するために試すことができます

$('#custom_carousel').on('slide.bs.carousel', function (evt) { 
 
     $('#custom_carousel > .controls li.active').removeClass('active'); 
 
     $('#custom_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active'); 
 
    }); 
 

 
    $('#intern_carousel').on('slide.bs.carousel', function (evt) { 
 
     $('#intern_carousel > .controls .active').closest('li').removeClass('active'); 
 
     $('#intern_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active'); 
 
    });

.jumbotron.carousel-slider, .slider-cont > .row > div { padding: 0; } 
 
.jumbotron .img-responsive { margin-bottom: 15px; } 
 
.slider-cont { 
 
    max-width: 100% !important; 
 
    width: 100% !important; 
 
    padding: 0; 
 
} 
 
/* Override default Bootstrap classes */ 
 
.carousel-inner { font-size: 12px; } 
 
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img { 
 
    width: 100% !important; 
 
} 
 
#custom_carousel .carousel-inner > .item > a > img, #custom_carousel .carousel-inner > .item > img, 
 
#custom_carousel .img-responsive, #custom_carousel .thumbnail a > img, #custom_carousel .thumbnail > img { 
 
    width: 100% !important; 
 
} 
 

 
.slider-cont > .row { margin: 0; } 
 
#custom_carousel .carousel-control .glyphicon-menu-left, #custom_carousel .carousel-control .glyphicon-menu-right { top: 45%; right: 50%; font-size: 36px; position: inherit; } 
 
/*#custom_carousel .carousel-control { border: 2px solid red; }*/ 
 
#custom_carousel .item { 
 
    color:#000; 
 
    background-color:#eee; 
 
} 
 
#custom_carousel .controls{ 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    padding:0; 
 
    margin:0; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
    position: relative; 
 
    background:#ddd; 
 
} 
 
#custom_carousel .controls li { 
 
    display: table-cell; 
 
    width: 1%; 
 
    max-width:90px; 
 

 
    /*background-color: rgb(234,234,234); opacity: 0.2;*/ 
 
} 
 
#custom_carousel .controls li.active { 
 
    border-top:3px solid #e53d20; 
 
    position: relative; 
 
} 
 
#custom_carousel li.active a { font-weight: bold; } 
 
#custom_carousel img { margin: 0; } 
 
#custom_carousel .controls > .nav a { 
 
    color: #6e6e6e; 
 
    font-size: 16px; 
 
    /*font-weight: 400;*/ 
 
    padding: 18px 15px; 
 
} 
 
/* ******************* BEGIN Interne Carousels ******************* */ 
 
.interne-carousel { 
 
    background-color: #ffff00; 
 
    bottom: 142px; 
 
    height: 150px; 
 
    left: 0; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 500px; 
 
} 
 

 
#intern_carousel { 
 
    width: 500px; 
 
    left: 0; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
#intern_carousel .item { text-align: center; } 
 
#intern_carousel img { border: 2px #a29e9e solid; } 
 
#intern_carousel .controls li.active img { border: 2px red solid; } 
 
#intern_carousel .carousel-control { color: red; background: none; } 
 

 
#intern_carousel .controls li.active, #intern_carousel .controls li.active { 
 
    border-top: 3px solid yellowgreen; 
 
    position: relative; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="jumbotron carousel-slider"> 
 
    <div class="container slider-cont"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
       <!-- Begin Carousel --> 
 
       <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500"> 
 
        <!-- Wrapper for slides --> 
 
        <div class="carousel-inner"> 
 
         <div class="item active"> 
 
          <div class="container slider-cont"> 
 
           <div class="row"> 
 
            <div class="col-md-12"> 
 
             <img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive"> 
 

 
             <div class="interne-carousel"> 
 
              #####!!! interne-carousel !!!##### 
 
              <!-- Begin Interne Carousel --> 
 
              <div id="intern_carousel" class="carousel slide" data-ride="carousel" data-interval="2500"> 
 
               <!-- Wrapper for slides --> 
 
               <div class="carousel-inner"> 
 
                <div class="item active"> 
 
                 <div class="container slider-cont"> 
 
                  <div class="row"> 
 
                   <div class="col-md-12"> 
 
                    <h3>Lorem Ipsum 1</h3> 
 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid. 
 
                   </div> 
 
                  </div> 
 
                 </div> 
 
                </div> 
 
                <div class="item"> 
 
                 <div class="container slider-cont"> 
 
                  <div class="row"> 
 
                   <div class="col-md-12"> 
 
                    <h3>Lorem Ipsum 2</h3> 
 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid. 
 
                   </div> 
 
                  </div> 
 
                 </div> 
 
                </div> 
 
                <div class="item"> 
 
                 <div class="container slider-cont"> 
 
                  <div class="row"> 
 
                   <div class="col-md-12"> 
 
                    <h3>Lorem Ipsum 3</h3> 
 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid. 
 
                   </div> 
 
                  </div> 
 
                 </div> 
 
                </div> 
 
                <!-- End Item --> 
 
               </div> 
 
               <!-- End Carousel Inner --> 
 

 
               <a class="left carousel-control" href="#intern_carousel" data-slide="prev"><span 
 
                 class="glyphicon glyphicon-menu-left"></span></a> 
 
               <a class="right carousel-control" href="#intern_carousel" data-slide="next"><span 
 
                 class="glyphicon glyphicon-menu-right"></span></a> 
 

 

 
               <div class="controls"> 
 
                <ul class="nav"> 
 
                 <li data-target="#intern_carousel" data-slide-to="0" class="active"> 
 

 
                  <a href="#"><img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/></a> 
 
                 </li> 
 
                 <li data-target="#intern_carousel" data-slide-to="1"> 
 
                  <a href="#"><img src="http://placehold.it/75x44/999999/cccccc" alt=""/></a> 
 
                 </li> 
 
                 <li data-target="#intern_carousel" data-slide-to="2"> 
 
                  <a href="#"><img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/></a> 
 
                 </li> 
 
                </ul> 
 
               </div> 
 
              </div> 
 
              <!-- End Interne Carousel --> 
 
             </div> 
 

 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
         <div class="item"> 
 
          <div class="container slider-cont"> 
 
           <div class="row"> 
 
            <div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
         <div class="item"> 
 
          <div class="container slider-cont"> 
 
           <div class="row"> 
 
            <div class="col-md-12"><img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive"></div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
         <div class="item"> 
 
          <div class="container slider-cont"> 
 
           <div class="row"> 
 
            <div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
         <!-- End Item --> 
 
        </div> 
 
        <!-- End Carousel Inner --> 
 

 
        <a class="left carousel-control" href="#custom_carousel" data-slide="prev"><span 
 
          class="glyphicon glyphicon-menu-left"></span></a> 
 
        <a class="right carousel-control" href="#custom_carousel" data-slide="next"><span 
 
          class="glyphicon glyphicon-menu-right"></span></a> 
 

 

 
        <div class="controls"> 
 
         <ul class="nav"> 
 
          <li data-target="#custom_carousel" data-slide-to="0" class="active"> 
 
           <a href="#">Lorem Ipsum</a> 
 
          </li> 
 
          <li data-target="#custom_carousel" data-slide-to="1"> 
 
           <a href="#">Sed ut perspiciatis</a> 
 
          </li> 
 
          <li data-target="#custom_carousel" data-slide-to="2"> 
 
           <a href="#">Lorem Ipsum</a> 
 
          </li> 
 
          <li data-target="#custom_carousel" data-slide-to="3"> 
 
           <a href="#">Sed ut perspiciatis</a> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
       <!-- End Carousel --> 
 

 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

私は一時的に子供のカルーセル内のアイテムの "アクティブな"クラスを変更します。親carouseのイベントが終了した後に追加してください。

btn.on("click", function() { 
       /* 
       Fix for Nested Carousel: 
       Before any sliding action, need to "hide" inner carouse active items 
       After sliding action, update active items again 
       */ 

       $.each(carourselInnerHolder.find(".child-carousel.active"), function (i, item) { 
        $(item).removeClass("active").addClass("active-fix-nested"); 
       }); 


       setTimeout(function() { 
        Metronic.unblockUI(); //blockUI to avoid multiple actions immediately 
       }, 200); 

       carouselHolder.carousel(carouselIndex); // action that trigger update parent Carousel to slide to new item with this index 

       $.each(carourselInnerHolder.find(".child-carousel.active-fix-nested"), function (i, item) { 
        $(item).addClass("active").removeClass("active-fix-nested"); 
       }); 

       /* 
       END Fix for Nested Carousel 
       */ 

      });