Question

我正在尝试将AnythingSlider合并到RoR网站https://amillet89.heroku.com/中，并且无法让滑块工作。相反，列表图像只是堆叠在一起。我在anythingSlider方法中放了一个alert语句，似乎没有被调用。我检查了Chrome中的资源，看起来jQuery和anythingSlider函数都被加载（通过application.js中的资产管道），所以我不确定为什么它没有被调用。

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

关于可能出错的任何想法？

Answer 1

将您的js函数挂钩到jQuery.ready()或jQuery(window).load()作为回调。

它无效的原因是，您对$('#slider').anythingSlider()的呼叫位于<ul id="slider">之上，并立即执行。当JS运行时，#slider不存在，因此该函数不执行任何操作。这段代码应该可行，但我没有测试。

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

$(window).load( slider.init )

任何滑块都在堆叠列表项

1 个答案: