语义 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: ''
});
});
我正在为我的 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: ''
});
});