Семантический пользовательский интерфейс слайдера JavaScript не работает - PullRequest
Новая
       15

Семантический пользовательский интерфейс слайдера JavaScript не работает

0 голосов
/ 13 июня 2019

Я тестирую простой простой слайдер изображений для моего приложения 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>

Я пытался поместить это в свое приложение. Js 

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

В моем приложении установлены необходимые гемы и требуемый semantic-ui. Js

1 Ответ

1 голос
/ 13 июня 2019

Предполагается, что в вашем примере вы добавляете библиотеку ползунков из внешнего ресурса.

Просто добавьте этот скрипт в макет приложения. 

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