漫游滑轨只显示空白屏幕

Rambling-slider-rails shows only blank screen

本文关键字:空白 屏幕 显示 漫游      更新时间:2024-02-27

我正在使用Rails 4.0.1和Ruby 2.0制作一个应用程序,在安装"漫游滑块"图像转盘时遇到了麻烦。

这是gemfile的一部分:

...
gem 'paperclip'
gem 'rambling-slider-rails', :git => 'https://github.com/gonzedge/rambling-slider-rails'
gem 'uglifier', '>= 1.3.0'
...

我运行了bundle install,并按照说明在清单文件中放置了对jquery.ramblingslider的引用。

我的app/assets/javascripts/application.js文件:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.rambling.slider
//= require_tree .

我的app/assets/stylesheets/application.css文件:

/*
*= require jquery.rambling.slider
*= require_self
*= require_tree .
*/

我在app/views/layouts/application.html.erb中包含了链接标签,如下所示:

...
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag 'jquery.rambling.slider' %>
<%= javascript_include_tag 'jquery.rambling.slider' %>
<%= csrf_meta_tags %>
...

然后在实际视图中添加了一些伪图像和相应的调用javascript:

<div id="slider">
  <%= image_tag "lorem1.jpeg" %>
  <%= image_tag "lorem2.jpeg" %>
  <%= image_tag "lorem3.jpeg" %>
</div>
<script>
  $(window).load(function(){
    $('#slider').ramblingSlider();
  });
</script>

但所有这些在页面上看起来都很简单。

我知道这些图像被正确引用,因为当我在视图文件中注释掉脚本时,这3个图像看起来没有问题。

Chrome中的开发工具只显示在jquery.js上有一条警告:"event.returnValue已弃用。请改用标准event.prventDefault()。"?body=1:5535。(如果需要,我也可以显示这一行)只有在脚本未注释时才会出现此警告。我一评论出来,警告就消失了。

任何帮助都将不胜感激。提前感谢!

您提到的问题(1,2,3链接)是因为没有包括主题效果而发生的。您可以通过添加一个带有"主题默认"类的div来包括这个问题,该类存在于散序滑块的.css文件中。为此,您还需要在样式表&图像应用程序的文件夹

<div id="wrapper">
 <div class="slider-wrapper theme-default">
  <div class="ribbon"></div>
  <div id="slider" class="ramblingSlider">
   <%= image_tag "lorem1.jpeg" %>
   <%= image_tag "lorem2.jpeg" %>
   <%= image_tag "lorem3.jpeg" %>
  </div>
 </div>
</div>