Anything Slider is stacking list items

Question

I am trying to incorporate the AnythingSlider into a RoR site https://amillet89.heroku.com/ and am having trouble getting the slider to work. Instead, the list images are just getting stacked on top of one another. I put an alert statement in the anythingSlider method, which isn't getting called it seems. I checked the resources in Chrome, and it looks like both jQuery and the anythingSlider function are getting loaded (through the asset pipeline in application.js), so I am not sure why it isn't getting called.

<div>
  <ul id="slider">
  <li><img src="http://placekitten.com/300/200" alt="" /></li>
  <li><img src="http://placehold.it/300x200" alt="" /></li>
  <li><img src="http://placebear.com/300/200" alt="" /></li>
 <li><img src="http://dummyimage.com/300x200/000/fff.jpg" alt="" /></li>
 <li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>

Any ideas on what could be going wrong?

Answer 1

Hook your js function into jQuery.ready() or jQuery(window).load() as a callback.

The reason it is not working, is your call to $('#slider').anythingSlider() is placed above <ul id="slider"> and it is executed immediately. When the JS runs, the #slider doesn't exist, so the function doesn't do anything. This code should work, but I didn't test.

var slider = {
      init: function() {
          $('#slider').anythingSlider({});
     }
}

$(window).load( slider.init )