語義UI滑塊JavaScript無法正常工作

Question

我正在為Rails應用測試一個簡單的圖像滑塊 ，但是它不起作用，而是將圖像堆疊在一起。

<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: ''
    });

我在application.js中安裝了必要的gem和必需的語義UI

Answer 1

假設您的示例是從外部資源添加滑塊庫。

只需將此腳本添加到您的應用程序布局即可。

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>

UPDATE

還將您的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: ''
  });
});