2016-04-26 20 views
2

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

我很確定我的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在循環

回答

0

通知,你調用類項目(不工作之一)

<% @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 %> 
+0

Thanks Christian,我喜歡這種設置,以便在我的迭代中首先創建一個「主動」項目,這樣我就可以刪除(我的例子中的chess.png),但它會導致與以前完全相同的問題(圖像將根據間隔滾動瀏覽,但傳送帶按鈕仍然不起作用)。任何其他想法? – Senator

+0

好吧,這很奇怪,我嘗試使用你的代碼創建相同的場景(我只是創建一個圖像字段的遠郊表,並創建一個種子文件上傳圖像),它在我的工作正常,我使用carrierwave寶石我的形象上傳。唯一的區別是我將你的咖啡轉換爲javascript ... –

+0

Humf,你認爲它與使用Java上的咖啡有關嗎?在我的應用程序視圖中,我有這個鏈接的JavaScript,是否有一個類似的腳本,我需要包括咖啡腳本? <! - 最新的編譯和縮小的JavaScript - > Senator