【发布时间】：2017-04-08 14:58:32
【问题描述】：
我在 carousel 中有一个 carousel - 第一个 carousel 是在一个循环中显示多个产品，在每个产品部分中我有多个图像需要在 carousel 中显示。但是当我滑过外部旋转木马时，内部旋转木马停止工作：
.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>【问题讨论】：
标签： jquery html css twitter-bootstrap carousel