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

我试图在导轨应用程序中使用twitter-bootstrap设置Nivo Slider，我面对的问题是tha图像出现在其他不滑动的顶部，任何想法如何解决这个问题？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

来源

2013-02-08 evanx

我相信问题来自于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。替代字幕选项还有其他例子。

来源

2013-02-08 18:34:42 Boris

嗨@bborisovs，谢谢你的回答然而，当我实现它，我得到一个“未定义的方法img.caption_for_image”的错误，任何想法，为什么？ – evanx 2013-02-08 19:28:17

什么是存储标题的“列名称”。这个例子说明列的名字是'caption_for_image'。 – Boris 2013-02-08 19:43:57

列的名称是'标题'，但我已经尝试过，并得到相同的错误。 – evanx 2013-02-08 19:54:14

我发现了一个很简单的解决这个问题：

我使用的是传统的CMS而这将旁边的滑块一些图像（导致空白幻灯片）图像映射标签。简单地忽略不相关的元素似乎运作良好。

在你jquery.nivo.slider.js文件替换线36 //查找我们滑块孩子

替换此

36 - var kids = slider.children();

与

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

保存更改，重新启动浏览器和问题解决。

欲了解更多详情，请访问github gilbitron/Nivo-Slider

来源

2013-02-08 20:17:29 evanx

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

回答

相关问题