这是一个演示，其中包含2个指向2个模态窗口的链接，每个窗口都有一个图像旋转木马。第一个旋转木马进展顺利（自动和控制）。但是，第二个转盘不会带有指示器，控制器，甚至是自动的。
这似乎可能是一个结束问题，但我似乎无法找到它。
.carousel-caption {
font-size: 21px;
font-weight: 300;
opacity: 0.7;
}
.carousel-inner > .item > img {
width: 900px;
}
.modal-body {
padding: 0;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
font-size: 60px;
}
#portfolio .portfolio-item {
right: 0;
margin: 0 0 15px;
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
margin: 0 auto;
max-width: 400px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(254,209,54,.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
margin: 0 auto;
padding: 25px;
max-width: 400px;
text-align: center;
background-color: #fff;
}
#portfolio .portfolio-item .portfolio-caption h4 {
margin: 0;
text-transform: none;
}
#portfolio .portfolio-item .portfolio-caption p {
margin: 0;
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-style: italic;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Portfolio Grid Section -->
<section class="bg-light-gray" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Photos</h2>
<h3 class="section-subheading text-muted">Click on a
category to scroll through more images</h3>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#livingroom">
<div class="portfolio-hover">
<div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div>
</div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a>
<div class="portfolio-caption">
<h4>Living Room</h4>
</div>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#kitchen">
<div class="portfolio-hover">
<div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div>
</div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a>
<div class="portfolio-caption">
<h4>Kitchen</h4>
</div>
</div>
</div>
</div>
</section>
<!-- Living Room -->
<div class="modal fade" id="livingroom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Living Room</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/900x500" alt="bedroom">
<div class="carousel-caption">
A quiet retreat from the rest of the house.
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="bedroom">
<div class="carousel-caption">
Warm and cozy, yet large enough for the whole family.
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="bedroom">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Kitchen -->
<div class="modal fade" id="kitchen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Kitchen</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
答案 0 :(得分：1)
您为两个轮播使用相同的ID，因此当您打开第二个轮播时，控件仍然与第一个相关联。 Per the documentation，如果您在同一页面上使用多个轮播，则他们都需要具有唯一ID ，并且左右滑动控件的href属性需要指向那些ID。更新幻灯片指示器的数据目标属性以使用此ID也不是一个坏主意，但通过测试所有内容，我不需要它。
.carousel-caption {
font-size: 21px;
font-weight: 300;
opacity: 0.7;
}
.carousel-inner > .item > img {
width: 900px;
}
.modal-body {
padding: 0;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
font-size: 60px;
}
#portfolio .portfolio-item {
right: 0;
margin: 0 0 15px;
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
margin: 0 auto;
max-width: 400px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(254,209,54,.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
margin: 0 auto;
padding: 25px;
max-width: 400px;
text-align: center;
background-color: #fff;
}
#portfolio .portfolio-item .portfolio-caption h4 {
margin: 0;
text-transform: none;
}
#portfolio .portfolio-item .portfolio-caption p {
margin: 0;
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-style: italic;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Portfolio Grid Section -->
<section class="bg-light-gray" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Photos</h2>
<h3 class="section-subheading text-muted">Click on a
category to scroll through more images</h3>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#livingroom">
<div class="portfolio-hover">
<div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div>
</div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a>
<div class="portfolio-caption">
<h4>Living Room</h4>
</div>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#kitchen">
<div class="portfolio-hover">
<div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div>
</div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a>
<div class="portfolio-caption">
<h4>Kitchen</h4>
</div>
</div>
</div>
</div>
</section>
<!-- Living Room -->
<div class="modal fade" id="livingroom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Living Room</h4>
</div>
<div class="modal-body">
<div id="carousel-livingroom" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-livingroom" data-slide-to="0" class="active"></li>
<li data-target="#carousel-livingroom" data-slide-to="1"></li>
<li data-target="#carousel-livingroom" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/900x500" alt="bedroom">
<div class="carousel-caption">
A quiet retreat from the rest of the house.
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="bedroom">
<div class="carousel-caption">
Warm and cozy, yet large enough for the whole family.
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="bedroom">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-livingroom" 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="#carousel-livingroom" 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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Kitchen -->
<div class="modal fade" id="kitchen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Kitchen</h4>
</div>
<div class="modal-body">
<div id="carousel-kitchen" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-kitchen" data-slide-to="0" class="active"></li>
<li data-target="#carousel-kitchen" data-slide-to="1"></li>
<li data-target="#carousel-kitchen" data-slide-to="2"></li>
<li data-target="#carousel-kitchen" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://placehold.it/900x500" alt="kitchen">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-kitchen" 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="#carousel-kitchen" 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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
正如您在上面的代码示例和工作片段中所看到的，每个轮播现在都有一个唯一的ID，并且每个轮播的控件的href属性都设置为使用他们所在的轮播ID。 。两个模态都打开，每个旋转木马左右移动，现在没有问题。