Nivo Slider，在另一个之上显示图像（没有“滑动”）答案

【问题标题】：Nivo Slider, showing image one on top of the other (nothing of "sliding")Nivo Slider，在另一个之上显示图像（没有“滑动”）
【发布时间】：2013-02-08 17:55:51
【问题描述】：

我正在尝试使用 twitter-bootstrap 在 Rails 应用程序中设置 Nivo Slider，我面临的问题是图像出现在另一个不滑动的顶部，知道如何解决这个问题吗？

这是我的代码：

加载 nivo 滑块：

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <% @page.images.each_with_index do |img, index| %>      
            <%= image_tag img.url, :title => '#htmlcaption' %> 
      </div>
</div>
    <div id="htmlcaption" class="nivo-html-caption">
    <%=raw @page.caption_for_image_index(index) %>
  </div>  
    <% end %>

_javascript.html.erb

<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'jquery.nivo.slider.pack' %>
<%= javascript_include_tag 'jquery.nivo.slider' %>

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade',
        pauseTime: 5000,
        directionNav:true,
        controlNav:true

    });
});
</script>

应用程序.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap

【问题讨论】：

标签： ruby-on-rails-3 nivo-slider

【解决方案1】：

我相信问题来自each 循环。如果您注意到循环内部有两个关闭的div 标签 - 请在此行下方<%= image_tag img.url, :title => '#htmlcaption' %>。因此，您打开divs 一次，然后关闭多次。

你可以做的是稍微改变一下代码，比如：

<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
    <% @page.images.each do |img| %>      
        <%= image_tag img.url, :title => img.caption_for_image %> 
    <% end %>
  </div>
</div>

看看Nivo Docs。还有其他替代字幕选项的示例。

【讨论】：

嗨@bborisovs，谢谢你的回答，但是当我实现它时，我得到一个“未定义的方法img.caption_for_image”错误，知道为什么吗？
存储标题的column name 是什么。此示例声明列的名称是caption_for_image。
列的名称是 'caption' 但我已经尝试过并得到同样的错误。
我假设 url 和 caption 都存储在同一个表中，例如@page = Model.all;并且两者都可以从模型中访问，例如attr_accessible :url, :caption。所以只尝试@page.each 和img.caption。

【解决方案2】：

我找到了一个非常简单的方法来解决这个问题：

我使用的是旧版 CMS，它在滑块中的一些图像旁边插入图像映射标签（导致空白幻灯片）。简单地忽略不相关的元素似乎效果很好。

在您的 jquery.nivo.slider.js 文件中替换第 36 行 //找到我们的子滑块

替换这个

36 - var kids = slider.children();

与

36 - var kids = slider.children("img,a");

保存更改，重新加载浏览器并解决问题。

更多详情请访问github gilbitron / Nivo-Slider

【讨论】：