我在一页上有几个相册(缩略图、链接)。这个想法是,当用户点击缩略图时,bootstrap 轮播幻灯片会弹出这张相册中的图片。
其中一张专辑的 HTML 如下所示(第二张相同):
<div class="container">
<div class="row">
<!-- Album 1 -->
<div class="col-sm-12 col-md-3 col-lg-3 box">
<a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"><span class="spanner"></span></a>
<div class=thumbnail style="background-image: url(image1.jpg);">
<div class="caption">
<h4>Album 1</h4>
<p class="photo-text">Album 1 description</p>
</div>
</div>
<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="image1.jpg" alt="image1">
</div>
<div class="item">
<img class="img-responsive" src="image2.jpg" alt="image2">
</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>
问题是当我按下相册缩略图时,两个幻灯片都会弹出。我认为问题出在“事件”上,但我不确定如何解决。谢谢!
最佳答案
检查并确保两个轮播具有不同的 ID。您是否使用 id 加载轮播?
关于html - bootstrap carousel 两个幻灯片放映同时出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44467563/