Question

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

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

这是我的代码：

    <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。默认情况下，只会选择DOM上的第一个ID元素（在您的情况下为First Slider）。

尝试更新您的代码 -

<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 。

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

Answer 2

您的所有旋转木马都有相同的ID。把它们作为唯一ID，并用新id改变控件。个

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

2 个答案: