Ruby on Rails - Bootstrap旋轉木馬按鈕無法正常工作

Question

我正嘗試在html5中通過Ruby on Rails中的回形針創建一個圖像傳送帶。我設法創建了一個成功的旋轉木馬，我使用靜態的股票圖像（5），但是當我嘗試遍歷圖像時，格式樹枝和間隔工作正常，但'prev'&'next'按鈕不起作用。

我很確定我的jquery鏈接都是正確設置，考慮到我的靜態輪播作品，但我無法弄清楚迭代一。我已經在下面列出了。任何幫助將不勝感激，謝謝！

，僅供參考 - 我研究了一堆像這樣的，沒有職位似乎回答我的具體問題 - Bootstrap Carousel Transitions and Prev/Next Buttons Not Working

代碼中按鈕不起作用：

  <div id="mycarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#mycarousel" data-slide-to="1"></li> 
       <li data-target="#mycarousel" data-slide-to="2"></li> 
       <li data-target="#mycarousel" data-slide-to="3"></li> 
       <li data-target="#mycarousel" data-slide-to="4"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
       <div class="active item"> 
       <%= image_tag("Chess.png", :alt => "chess") %> 
       </div> 
       <% @outings.each do |outing| %> 
        <div class="item"> 
        <%= image_tag outing.image.url(:medium) %> 
        </div> 
       <% end %> 
      </div> 

      <!-- Controls --> 
       <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       </a> 
       <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       </a> 
      </div> 

代碼，工作：

 <div id="mycarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
      <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#mycarousel" data-slide-to="1"></li> 
      <li data-target="#mycarousel" data-slide-to="2"></li> 
      <li data-target="#mycarousel" data-slide-to="3"></li> 
      <li data-target="#mycarousel" data-slide-to="4"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <%= image_tag("Chess.png", :alt => "chess") %> 
       <div class="carousel-caption"> 
       <h3>First Image</h3> 
       </div> 
      </div> 
      <div class="item"> 
       <%= image_tag("cocktail.png", :alt => "cocktail") %> 
       <div class="carousel-caption"> 
       <h3>Second Image</h3> 
       </div> 
      </div> 
      <div class="item"> 
       <%= image_tag("concert.png", :alt => "concert") %> 
       <div class="carousel-caption"> 
       <h3>Third Image</h3> 
       </div> 
      </div> 
      <div class="item"> 
       <%= image_tag("football.png", :alt => "football") %> 
       <div class="carousel-caption"> 
       <h3>Fourth Image</h3> 
       </div> 
      </div> 
      <div class="item"> 
       <%= image_tag("Coffee.png", :alt => "coffee") %> 
       <div class="carousel-caption"> 
       <h3>Fifth Image</h3> 
       </div> 
      </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      </a> 
      <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      </a> 
     </div> 

咖啡的Javascript

$('.left').click -> 
    $('#myCarousel').carousel 'prev' 
    return 
$('.right').click -> 
$('#myCarousel').carousel 'next' 
return 
$('.carousel').carousel 
    interval: 60 
    pause: 'hover' 
    wrap: true 

012在循環

Answer 1

保持在這個終於想通了！因爲我有不止一個傳送帶，所以我需要多個傳送帶ID來達到這個目標。Q & A：Multiple bootstrap carousels on one page, can only control one

Answer 2

通知，你調用類項目（不工作之一）

<% @outings.each do |outing| %> 
    <div class="item"> 
    <%= image_tag outing.image.url(:medium) %> 
    </div> 
<% end %> 

然後在工作代碼

<div class="item active"> 
    <%= image_tag("Chess.png", :alt => "chess") %> 
    <div class="carousel-caption"> 
    <h3>First Image</h3> 
    </div> 
</div> 

第一個具有「主動」通知類，引導輪播需要至少一個類「項目」爲「活動」。

因此，在您的代碼中，嘗試在第一個循環中添加「active」類。

<% @outings.each_with_index do |outing, index| %> 
    <div class="item <%= index == 0 ? 'active' : '' %>"> 
    <%= image_tag outing.image.url(:medium) %> 
    </div> 
<% end %>