Semantic UI Slider javascript not working

Question

I'm testing out a simple image slider for my rails app but it's not working, the images stack on top of each other instead.

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

I tried putting this in my application.js

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

I have the necessary gems installed and required semantic-ui in my application.js

Answer 1

Assuming to your example, you add slider library from outer resource.

Just add this script to your application layout.

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

Which populates your code with such html:

<script src="https://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js"></script>

UPDATE

Also wrap your glide() function call into document.ready()

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

Or if you're using turbolinks , wrap it such case:

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