javascript - Ramble-slider-rails 仅显示空白屏幕

Question

我正在使用 Rails 4.0.1 和 Ruby 2.0 制作一个应用程序，但在安装 here 中的“Rambling slider”图像轮播时遇到了麻烦。 .

这是 gemfile 的部分:

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

我运行了bundle install，并按照说明在我的 list 文件中添加了对 jquery.rambling.slider 的引用。

我的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 %>
...

然后在实际 View 中添加一些虚拟图像和相应的调用 javascript:

<div id="slider">
  <%= image_tag "lorem1.jpeg" %>
  <%= image_tag "lorem2.jpeg" %>
  <%= image_tag "lorem3.jpeg" %>
</div>

<script>
  $(window).load(function(){
    $('#slider').ramblingSlider();
  });
</script>

但所有这些在页面上都显示为简单的 1'2'3。

我知道图像被正确引用，因为当我注释掉 View 文件中的脚本时，这 3 个图像显示没有问题。

Chrome 中的开发者工具仅显示一条警告:“event.returnValue 已弃用。请改用标准 event.preventDefault()。”在 jquery.js?body=1:5375。 (如果您需要的话，我也可以显示这一行)此警告仅在取消注释脚本时出现。一旦我将其注释掉，警告就会消失。

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

Answer 1

出现您提到的问题(1,2,3链接)是因为未包含主题效果，您可以通过添加带有“theme-default”类的div来包含此问题，该类存在于 rambling-slider 的 .css 文件中。为此，您还需要在应用程序的 stylesheet 和 images 文件夹中添加 themes 文件夹

<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>