別のブートストラップカルーセルの中にブートストラップカルーセル

Question

私はカルーセルの中にカルーセルを持っています - 最初のカルーセルはループの中にいくつかの製品を表示し、各製品セクションの中にカルーセルで表示する必要がある複数の画像があります。いくつかの試行錯誤方法の後

.inner_carousel { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 300px; 
 
    text-align: center; 
 
} 
 
.inner_carousel1 { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 300px 
 
} 
 
.inner_carousel2 { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 300px 
 
} 
 
.sub_car { 
 
    background-color: black; 
 
    width: 300px; 
 
    height: 300px 
 
} 
 
.sub_car1 { 
 
    background-color: pink; 
 
    width: 300px; 
 
    height: 300px 
 
} 
 
#myCarousel1 { 
 
    width: 310px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <div class="inner_carousel"> 
 
     <div id="myCarousel1" class="carousel slide" data-ride="carousel"> 
 
      <!-- Wrapper for slides --> 
 
      <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
       <div class="sub_car1"></div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="sub_car"></div> 
 
      </div> 
 
      </div> 
 
      <!-- Left and right controls --> 
 
      <a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev"> 
 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
      <span class="sr-only">Previous</span> 
 
      </a> 
 
      <a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next"> 
 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="inner_carousel1"></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="inner_carousel2"></div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
<script> 
 
    $('#myCarousel').carousel(); 
 
    $('#myCarousel1').carousel(); 
 
</script>

Answer 1

を、私は別のカルーセル内のカルーセルがサポートされていないことがわかったいくつかのサポートサイト内を検索：私は外カルーセルを通じてスライドするときしかし、内側の1は動作を停止します：

カルーセルcarousel.js

要素を循環するためのスライドショーコンポーネント、カルーセルのように。 ネストされたカルーセルはサポートされていません。

出典：http://getbootstrap.com/javascript/#carousel

はまた、このスレッドに出くわした：私が使用している https://github.com/twbs/bootstrap/issues/14441

別の代替ソリューションを

$(document).ready(function() { 
 
    if ($(window).width() > 768) { 
 
    // var windo_height= $(window).height(); 
 
    var contain_height = $(".dashboard_rightheader").height(); 
 
    var foot_height = $(".dash_footer").height(); 
 
    $(".dashboard_leftheader").height(contain_height); 
 
    } 
 

 
}); 
 
$('.next').click(function() { 
 

 
    var nextId = $(this).parents('.tab-pane').next().attr("id"); 
 
    $('[href=#' + nextId + ']').tab('show'); 
 

 
}) 
 

 
$('.first').click(function() { 
 
    $('#myWizard a:first').tab('show') 
 
})

.inner_carousel { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 300px; 
 
    text-align: center; 
 
} 
 
.inner_carousel1 { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 300px 
 
} 
 
.inner_carousel2 { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 300px 
 
} 
 
.sub_car { 
 
    background-color: black; 
 
    width: 300px; 
 
    height: 300px 
 
} 
 
.sub_car1 { 
 
    background-color: pink; 
 
    width: 300px; 
 
    height: 300px 
 
} 
 
#myCarousel1 { 
 
    width: 310px; 
 
    display: inline-block; 
 
} 
 
.tab-pane1 img { 
 
    background-color: red; 
 
} 
 
.tab-pane2 img { 
 
    background-color: blue; 
 
} 
 
.tab-pane3 img { 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <div class="inner_carousel"> 
 
     <div id="neoidea"> 
 
      <!-- <div class="navbar"> 
 
          <div class="navbar-inner"> 
 
            <ul class="nav nav-pills"> 
 
            <li class=""><a href="#step1" data-toggle="tab" aria-expanded="false">Step 1</a></li> 
 
            <li class=""><a href="#step2" data-toggle="tab" aria-expanded="false">Step 2</a></li> 
 
            <li class=""><a href="#step3" data-toggle="tab" aria-expanded="false">Step 3</a></li> 
 
            </ul> 
 
          </div> 
 
          </div> --> 
 
      <!-- Indicators --> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#step11" data-toggle="tab" aria-expanded="false" class="active"></li> 
 
      <li data-target="#step12" data-toggle="tab" aria-expanded="false"></li> 
 
      <li data-target="#step13" data-toggle="tab" aria-expanded="false"></li> 
 
      </ol> 
 
      <div class="tab-content"> 
 
      <div class="tab-pane active tab-pane1" id="step11"> 
 
       <img src="http://placehold.it/299x299" alt="Chania"> 
 
      </div> 
 
      <div class="tab-pane tab-pane2" id="step12"> 
 
       <img src="http://placehold.it/300x300" alt="Chania"> 
 
      </div> 
 
      <div class="tab-pane tab-pane3" id="step13"> 
 
       <img src="http://placehold.it/301x301" alt="Chania"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="inner_carousel"> 
 
     <div id="neoidea"> 
 
      <!-- <div class="navbar"> 
 
          <div class="navbar-inner"> 
 
            <ul class="nav nav-pills"> 
 
            <li class=""><a href="#step1" data-toggle="tab" aria-expanded="false">Step 1</a></li> 
 
            <li class=""><a href="#step2" data-toggle="tab" aria-expanded="false">Step 2</a></li> 
 
            <li class=""><a href="#step3" data-toggle="tab" aria-expanded="false">Step 3</a></li> 
 
            </ul> 
 
          </div> 
 
          </div> --> 
 
      <!-- Indicators --> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#step21" data-toggle="tab" aria-expanded="false" class="active"></li> 
 
      <li data-target="#step22" data-toggle="tab" aria-expanded="false"></li> 
 
      <li data-target="#step23" data-toggle="tab" aria-expanded="false"></li> 
 
      </ol> 
 
      <div class="tab-content"> 
 
      <div class="tab-pane active tab-pane1" id="step21"> 
 
       <img src="http://placehold.it/299x299" alt="Chania"> 
 
      </div> 
 
      <div class="tab-pane tab-pane2" id="step22"> 
 
       <img src="http://placehold.it/300x300" alt="Chania"> 
 
      </div> 
 
      <div class="tab-pane tab-pane3" id="step23"> 
 
       <img src="http://placehold.it/301x301" alt="Chania"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="inner_carousel"> 
 
     <div id="neoidea"> 
 
      <!-- <div class="navbar"> 
 
          <div class="navbar-inner"> 
 
            <ul class="nav nav-pills"> 
 
            <li class=""><a href="#step1" data-toggle="tab" aria-expanded="false">Step 1</a></li> 
 
            <li class=""><a href="#step2" data-toggle="tab" aria-expanded="false">Step 2</a></li> 
 
            <li class=""><a href="#step3" data-toggle="tab" aria-expanded="false">Step 3</a></li> 
 
            </ul> 
 
          </div> 
 
          </div> --> 
 
      <!-- Indicators --> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#step31" data-toggle="tab" aria-expanded="false" class="active"></li> 
 
      <li data-target="#step32" data-toggle="tab" aria-expanded="false"></li> 
 
      <li data-target="#step33" data-toggle="tab" aria-expanded="false"></li> 
 
      </ol> 
 
      <div class="tab-content"> 
 
      <div class="tab-pane active tab-pane1" id="step31"> 
 
       <img src="http://placehold.it/299x299" alt="Chania"> 
 
      </div> 
 
      <div class="tab-pane tab-pane2" id="step32"> 
 
       <img src="http://placehold.it/300x300" alt="Chania"> 
 
      </div> 
 
      <div class="tab-pane tab-pane3" id="step33"> 
 
       <img src="http://placehold.it/301x301" alt="Chania"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
<script> 
 
    $('#myCarousel').carousel(); 
 
    $('#myCarousel1').carousel(); 
 
</script>