Owl-旋转木马不适用于 Rails

Question

Owl Carousel 不适用于我的 rails 安装。它没有出现在我的测试页面上，这个错误出现在 Chrome 开发者控制台中：

Uncaught TypeError: undefined is not a function

我已按照 https://github.com/acrogenesis/owlcarousel-rails

上的说明进行操作

和even installed this fix since Rails turbolinks apparently messes with DOM triggers.

这里是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

我在我的一个 rails 项目中使用了 owl 轮播。您不需要安装 gem。尝试从 Gemfile 中删除该行。确保您在 application.js 中具有 owl.carousel.js 和 application.css 中 owl.*.css 的正确路径。并重启服务器。

此外，我建议将任何外部 js (owl.carousel.js) 和 css (owl.carousel.css, owl.theme.css) 移动到 vendor/assets/。

Answer 2

您应该检查您的 javascript 文件，因为您似乎在某处有一个额外的初始化程序，Chrome 开发工具错误证明了这一点：

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

这与你的

完全不同

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

发生错误是因为 $('#owl-carousel') returns 一个空对象，因为您没有 id='owl-carousel'

的对象

Answer 3

我认为你在

中多了一个引号

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

它没有正确呈现。更改为

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

Answer 4

为了防止其他人遇到此问题，我构建了一个快速回购协议，演示了嵌入 bootstrap 网格的 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

希望这对某人有所帮助:)

Owl-旋转木马不适用于 Rails

Owl-Carousel not working with Rails

javascript

jquery

ruby-on-rails

owl-carousel