我目前有两个 Bootstrap 轮播，每个轮播都使用一个按钮来激活。单击任一按钮时，两个幻灯片放映看起来彼此重叠，因此我无法独立控制每个幻灯片，这也使它看起来非常没有吸引力。
您可以在我的 CodePen 中找到这两个按钮:click here
到目前为止，我已经这样做了:
<div class="container-fluid bg-5 text-center" id = "container-2">
<h2 class="margin about" style="color: #cdcdcd;">Portfolio</h2>
<div class = "row">
<div class = "col-md-4">
<div class = "well">
<h1> Click Me 1 </h1>
<!-- Large modal -->
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON1</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
<div class="carousel-caption">
One Image
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
<div class="carousel-caption">
Another Image
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
<div class="carousel-caption">
Another Image
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<div class = "well">
<h1> Click Me 2 </h1>
<!-- Large modal -->
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON 2</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
<div class="carousel-caption">
One Image
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
<div class="carousel-caption">
Another Image
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
<div class="carousel-caption">
Another Image
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
正如您将看到的，当您单击第一个按钮时，两个幻灯片都会打开，同样，当您单击第二个按钮时...目的是让两个按钮显示两个不同的幻灯片，因此我可以制作类似投资组合页面的东西。 有人可以帮我解决这个问题吗，我将不胜感激。
最佳答案
在你的按钮中你有 data-target=".bs-example-modal-lg"。通过 data-target="#id1" 将您的 data-target 切换为目标 id，然后在您的模式中相应地设置它。
关于javascript - 我有两个 bootstrap 弹出式旋转木马，但它们相互重叠，不能独立使用，我该如何解决这个问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38621786/