Bootstrap旋转木马 - 仅为第一个旋转木马工作的控件

Question

我正在为一个房地产公司开发网站，而我在Bootstrap的旋转木马控件中遇到问题。

我的目标是在每一列中有一行三个不同的列和一个传送带。我得到这个工作，问题是，当我在相应的列中获得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。默认情况下，只会选择DOM上的第一个ID元素（在您的案例中为第一个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来转盘一传送带两档和转盘三为你的三个轮播。并且像我在上面的代码中那样更新href。

如果问题仍然存在，请让我知道。

Answer 2

您的所有轮播具有相同的ID。把他们的唯一ID，并在新的身份证的控制改变。 th