Question

我正在尝试使用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>

的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

Nivo滑块，在另一个上面显示图像（没有“滑动”）

2 个答案: