[英]Semantic UI Slider javascript not working
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. 我正在为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>
I tried putting this in my application.js 我尝试将其放在我的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 我在application.js中安装了必要的gem和必需的语义UI
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: 哪个用这样的html填充代码:
<script src="https://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js"></script>
UPDATE UPDATE
Also wrap your glide()
function call into document.ready()
还将您的
glide()
函数调用包装到document.ready()
$( document ).ready(function() {
$('.slider').glide({
autoplay: false,
arrowsWrapperClass: 'slider-arrows',
arrowRightText: '',
arrowLeftText: ''
});
});
Or if you're using turbolinks
, wrap it such case: 或者,如果您使用的是
turbolinks
,则将其包装如下:
$(document).on('turbolinks:load', function() {
$('.slider').glide({
autoplay: false,
arrowsWrapperClass: 'slider-arrows',
arrowRightText: '',
arrowLeftText: ''
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.