CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-4asset-pipeline
Hank-Roughknuckles
Hank-Roughknuckles

Reputation: 578

Rambling-slider-rails shows only blank screen

I'm making an app using Rails 4.0.1 with Ruby 2.0 and I'm running into trouble installing the "Rambling slider" image carousel from here.

Here's the portion of the gemfile:

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

I ran bundle install and, following the instructions, put a reference to jquery.rambling.slider in my manifest files.

My app/assets/javascripts/application.js file:

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

My app/assets/stylesheets/application.css file:

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

I included the link tags in app/views/layouts/application.html.erb like so:

...
<%= 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 %>
...

Then added some dummy images and the invoking javascript in the actual view accordingly:

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

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

But all that appears a simple 1'2'3 on the page.

I know that the images are referenced correctly because when I comment out the script in the view file, the 3 images appear with no problems.

The developer tools in Chrome only show that there is a single warning saying "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." at jquery.js?body=1:5375. (I can show this line too if you need it) This warning only appears when the script is uncommented. As soon as I comment it out, the warning goes away.

Any help would be much appreciated. Thanks in advance!

Upvotes: 0

Views: 685

Answers (1)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6642

The problem you mentioned(1,2,3 links) occurs because the theme effect was not included, You can include this by adding a div with "theme-default" class, present in the .css file of rambling-slider. For this to work you also need to add the themes folder in stylesheet & images folder of your application

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

Upvotes: 3

Related Questions