Bootstrap 轮播 - 控件仅适用于第一个轮播

Question

我正在为一家房地产公司开发网站，但我在使用 Bootstrap 的轮播控件时遇到了问题。

我的目标是在一行中包含三个不同的列，每列中有一个 Carousel。我让它工作，问题是当我在相应的列中获得 3 个旋转木马时，2 号旋转木马和 3 号旋转木马的控件激活 1 号旋转木马而不是它们所属的旋转木马。

这是我的代码：

    <div class="row">
        <div class="col-md-4">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="http://lorempixel.com/400/400/" alt="...">
              </div>
              <div class="item">
                <img src="https://dummyimage.com/400x400/000/fff" alt="...">
              </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>
<!--FIRST COLUMN FINISHES HERE-->

 <!--SECOND COLUMN STARTS HERE-->       
        <div class="col-md-4">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="http://lorempixel.com/400/400/" alt="...">
              </div>
              <div class="item">
                <img src="https://dummyimage.com/400x400/000/fff" alt="...">
              </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>
<!--SECOND COLUMN FINISHES HERE-->

<!--THIRD COLUMN STARTS HERE--> 
        <div class="col-md-4">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="http://lorempixel.com/400/400/" alt="...">
              </div>
              <div class="item">
                <img src="https://dummyimage.com/400x400/000/fff" alt="...">
              </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>

你们知道为什么会这样吗？ 我需要做什么才能让控件激活自己的轮播而不是轮播编号 1？

我希望我说得清楚并且容易理解。预先感谢您的帮助。

Answer 1

您所有的轮播都具有相同的 ID。为它们设置唯一 ID，并使用新 ID 更改控件。第

Answer 2

因为您对所有三个轮播使用了相同的 ID。默认情况下，只会选择 DOM 上的第一个 ID 元素（在您的情况下为第一个滑块）。

尝试像这样更新您的代码 -

<a class="left carousel-control" href="#carousel-one" 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-one" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

同样，请将 ID 从 carousel-example-generic 更新为 carousel-one carousel-two 和 carousel-three 分别用于您的三个轮播。并像我在上面的代码中所做的那样更新 href。

如果问题仍然存在，请告诉我。

Bootstrap 轮播 - 控件仅适用于第一个轮播

Bootstrap Carousel - Controls only work for the first carousel

html

css

carousel

twitter-bootstrap