Owl-Carousel无法与Rails一起使用

God*_*a74 4 javascript jquery ruby-on-rails owl-carousel

Owl Carousel无法与我的滑轨安装配合使用。它没有显示在我的测试页上,并且此错误显示在Chrome开发者控制台中:

Chrome控制台错误突出显示对.owlCarousel()的调用

未捕获的TypeError:undefined不是函数

我已经按照https://github.com/acrogenesis/owlcarousel-rails上的指示进行操作

并且即使由于滑轨显然turbolinks混乱与DOM触发安装此修复程序

这是Rails中的相关代码:

**GemFile**
gem 'owlcarousel-rails'

**app/assets/application.js**
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require owl.carousel
//= require_tree .

**app/assets/stylesheets/application.css**
*= require_tree .
*= require_self 
*= require owl.carousel
*= require owl.theme

**home.html.erb**
<body>
...
<div class="owl-carousel" col-lg-12">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>
...
</body>
<script>
$(document).ready(function(){
 $('.owl-carousel').owlCarousel({
    autoPlay: 3000,
    item: 3
 });
});
</script>
Run Code Online (Sandbox Code Playgroud)

到目前为止,这是该区域的外观(应该在白色区域中包含内容): 仅显示页面标题的页面的屏幕截图

小智 5

以防万一其他人遇到此问题,我构建了一个快速回购程序,演示了owlcarousel-rails嵌入在引导网格中的gem 的工作版本。我还将说明我在中所做的更改README

我知道有时候您需要一起查看所有工作部件,以弄清楚哪里出了问题。

在此处回购:https : //github.com/EliCash82/carousel-optimization

采取一看app/assets/javascriptsapp/assets/stylesheets和最重要的app/views/static_pages/carousel_in_grid.html.erb

希望这可以帮助某人:)