Bootstrap-Karussell in einem anderen Bootstrap-Karussell

Question

Ich habe ein Karussell im Karussell - das erste Karussell soll mehrere Produkte in einer Schleife zeigen und in jedem Produktabschnitt habe ich mehrere Bilder, die in einem Karussell gezeigt werden müssen. Aber wenn ich durch das äußere Karussell gleiten, die innere stoppt Arbeits:

.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

Nach mehreren Trial and Error Methoden und die Suche durch mehrere Support-Seiten fand ich, dass Karussell in einem anderen Karussell wird nicht unterstützt :

Carousel carousel.js

A Diashow Komponente für durch Elemente cycling, wie ein Karussell. Verschachtelte Karussells werden nicht unterstützt.

Quelle: http://getbootstrap.com/javascript/#carousel

kam auch in diesem Thread: https://github.com/twbs/bootstrap/issues/14441

Eine weitere alternative Lösung, die ich verwendet habe, ist unten angegeben

$(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>