我正在使用gem owlcarousel:https://github.com/SirJls/owlcarousel2-rails
我将包含内容改为:在.js文件中
//= require owlcarousel2/owl.carousel
在.scss文件中:
@import 'owlcarousel2/owl.carousel';
@import 'owlcarousel2/owl.theme.default';
在.html.erb文件中:
<%= javascript_include_tag 'myarquive.js'%>
.js文件包含对owlcarousel函数的调用
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items:1,
nav:true,
autoplay:true,
});
})
在.html.erb arquive中我设置了下一个结构:
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="http://via.placeholder.com/1200x500?text=Slider+A"/>
<div class="item-caption">
<h3>Slider A Caption</h3>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x500?text=Slider+B"/>
<div class="item-caption">
<h3>Slider B Caption</h3>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x500?text=Slider+C"/>
<div class="item-caption">
<h3>Slider C Caption</h3>
</div>
</div>
</div>
</div>
在我的.scss中:
.owl-carousel{
position: relative;
}
.owl-carousel .item{
height: 500px;
}
.owl-carousel .item img{
width: 100%;
height: auto;
}
.owl-carousel .item .item-caption{
position: absolute;
bottom: 10%;
left: 5%;
color: #337ab7;
font-size: 36px;
font-weight: bold;
}
.container{
position: relative;
width: 100%;
height: auto;
}
owlcarousel已激活且正在运行,但调用特定功能的项目未激活,例如nav和autoplay。它们不起作用,我该怎么做才能激活owlcarousel项?
项目项目正常工作,导航和自动播放不起作用
您可以尝试使用:
document.addEventListener("turbolinks:load", function(){...
代替:
$(document).ready(function(){...
这是因为当准备好turbonliks时你的文件应该准备好,以便以后运行你的js。