语义 UI 滑块 javascript 不工作

Semantic UI Slider javascript not working

我正在为我的 rails 应用程序测试一个 simple image slider,但它不工作,而是图像堆叠在一起。

<div class="slider slider1">
    <div class="slides">
      <div class="slide-item item1">
      </div>
      <div class="slide-item item2"> 
      </div>
      <div class="slide-item item3">
      </div>
      <div class="slide-item item4">
      </div>
  </div>
</div>

我试着把它放在我的 application.js

 $('.slider').glide({
      autoplay: false,
      arrowsWrapperClass: 'slider-arrows',
      arrowRightText: '',
      arrowLeftText: ''
    });

我安装了必要的 gem 并在我的 application.js

中请求 uired semantic-ui

假设您的示例是从外部资源添加滑块库。

只需将此脚本添加到您的应用程序布局中即可。

javascript_include_tag "https://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js"

它用这样的 html:

填充您的代码
<script src="https://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js"></script>

更新

还将您的 glide() 函数调用包装到 document.ready()

$( document ).ready(function() {
    $('.slider').glide({
      autoplay: false,
      arrowsWrapperClass: 'slider-arrows',
      arrowRightText: '',
      arrowLeftText: ''
    });
});

或者,如果您使用的是 turbolinks,请将其包装成这样:

$(document).on('turbolinks:load', function() {
  $('.slider').glide({
    autoplay: false,
    arrowsWrapperClass: 'slider-arrows',
    arrowRightText: '',
    arrowLeftText: ''
  });
});