html - bootstrap carousel 两个幻灯片放映同时出现

Question

我在一页上有几个相册(缩略图、链接)。这个想法是，当用户点击缩略图时，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>

问题是当我按下相册缩略图时，两个幻灯片都会弹出。我认为问题出在“事件”上，但我不确定如何解决。谢谢!

Answer 1

检查并确保两个轮播具有不同的 ID。您是否使用 id 加载轮播？