Owl-Carousel不使用Rails

Question

Owl Carousel无法使用我的rails安装。 它没有出现在我的测试页面上，Chrome错误显示在Chrome开发者控制台中：

未捕获的TypeError：undefined不是函数

我按照https://github.com/acrogenesis/owlcarousel-rails上的说明进行操作

甚至安装此修复程序，因为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>

截至目前，这是该区域的样子（应该在白色区域内容）：

Answer 1

为了防止遇到此问题的其他人遇到此页面，我构建了一个快速回购，演示了嵌入在引导网格中的owlcarousel-rails gem的工作版本。 我还解释了我在README所做的更改。

我知道有时需要一起看所有工作部件才能找出出错的地方。

转到这里： https ： //github.com/EliCash82/carousel-optimization

看看app/assets/javascripts ， app/assets/stylesheets ，最重要的是app/views/static_pages/carousel_in_grid.html.erb

希望这有助于某人:)

Answer 2

您应该检查您的javascript文件，因为您似乎在某处有一个额外的初始化程序，Chrome Dev Tools错误就是证明：

$('#owl-carousel').owlCarousel();

这与你的完全不同

$('.owl-carousel').owlCarousel({
  autoPlay: 3000,
  item: 3
});

错误是因为$('#owl-carousel')返回一个null对象，因为你没有id ='owl-carousel'的对象

Answer 3

我认为你有一个额外的引号

<div class="owl-carousel" col-lg-12"> 

它没有正确渲染。 改成

<div class="owl-carousel col-lg-12"> 

Answer 4

我使用猫头鹰旋转木马和我的一个铁轨项目。 你不需要安装gem。 尝试从Gemfile中删除该行。 确保在application.css中的application.js和owl。*。css中有正确的owl.carousel.js路径。 然后重启服务器。

另外，我建议将任何外部js（owl.carousel.js）和css（owl.carousel.css，owl.theme.css）移动到vendor / assets /。