bootstrap carousel 两个幻灯片同时出现

Question

我在一页上有几个相册（缩略图、链接）。这个想法是，当用户点击缩略图时，引导轮播幻灯片会弹出此相册中的图片。

其中一张专辑的 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加载轮播吗？