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