Rambling-slider-rails 仅显示空白屏幕答案

【问题标题】：Rambling-slider-rails shows only blank screenRambling-slider-rails 仅显示空白屏幕
【发布时间】：2013-12-04 14:37:47
【问题描述】：

我正在使用带有 Ruby 2.0 的 Rails 4.0.1 制作应用程序，但在安装来自 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，并按照说明在我的清单文件中添加了对 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 %>
...

然后在实际视图中相应地添加一些虚拟图像和调用 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。

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

Chrome 中的开发人员工具仅显示有一条警告说“不推荐使用 event.returnValue。请改用标准 event.preventDefault()。”在 jquery.js?body=1:5375。（如果您需要，我也可以显示此行）此警告仅在脚本未注释时出现。一旦我将其注释掉，警告就会消失。

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

【问题讨论】：

您不需要任何 javascript_include_tag 或 stylesheet_include_tag 。删除它们。 event.returnValue 与您的滑块无关。忽略该警告。

标签： javascript jquery ruby-on-rails-4 asset-pipeline

【解决方案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>

【讨论】：