Owlcarousel2功能不适用于rails

Question

我正在使用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项？

项目项目正常工作，导航和自动播放不起作用

Answer 1

您可以尝试使用：

document.addEventListener("turbolinks:load", function(){...

代替：

$(document).ready(function(){...

这是因为当准备好turbonliks时你的文件应该准备好，以便以后运行你的js。