Ruby on Rails - 引导轮播按钮不起作用

Question

我正在尝试通过 Ruby on Rails 中的回形针 gem 在 html5 中创建图像轮播。我设法创建了一个成功的轮播，其中我使用了静态的库存图片 (5)，但是当我尝试遍历图片时，格式保持不变，间隔有效，但“上一个”和“下一个”按钮不起作用.

考虑到我的静态轮播作品，我很确定我的 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

Answer 1

注意在您的循环中，您正在调用类项目（不工作的项目）

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

第一个具有“活动”类，引导轮播需要至少一个类“项目”才能“活动”。

所以在您的代码中尝试在第一个循环中添加“活动”类。

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

Answer 2

坚持了下来，终于弄明白了！因为我有不止一个轮播，所以我需要多个轮播 ID，每个 stackoverflow 问答：Multiple bootstrap carousels on one page, can only control one