javascript - Ruby on Rails - Bootstrap 轮播按钮不起作用

Question

我正在尝试创建一个 html5 图像轮播，这些图像是通过 Ruby on Rails 中的回形针 gem 获取的。我成功地创建了一个成功的轮播，其中使用静态的库存图像 (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>

第一个具有“active”类， Bootstrap 轮播需要至少一个类“item”才能“active”。

因此，在您的代码中尝试在第一个循环中添加“active”类。

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