轨道上的红宝石 3 - Nivo 滑块，一个在另一个之上显示图像(没有"sliding")

Question

我正试图在一个带有twitter引导程序的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>

application.js

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

Answer 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。还有其他可选字幕选项的示例。

Answer 2

我发现了一个非常简单的解决方案：

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

在jquery.nivo.slider.js文件中替换第36行//查找我们的滑盖儿童

更换此

36 - var kids = slider.children();

带有

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

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

有关更多详细信息，请访问github gilbitron/Nivo Slider