【问题标题】:Owl-Carousel not working with Rails猫头鹰旋转木马不适用于 Rails
【发布时间】:2016-10-28 03:59:57
【问题描述】:

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>

截至目前,该区域是这样的(应该在白色区域中有内容):

【问题讨论】:

  • jquery.turbolinks 表示将 require turbolinks 放在所有其他 require 语句之后。你试过这样做吗?

标签: javascript jquery ruby-on-rails owl-carousel


【解决方案1】:

以防万一其他人遇到此问题,我构建了一个快速存储库,演示了嵌入在引导网格中的 owlcarousel-rails gem 的工作版本。我还解释了我在README 中所做的更改。

我知道有时需要同时查看所有工作部分,才能准确找出哪里出了问题。

在这里回购:https://github.com/EliCash82/carousel-optimization

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

希望这可以帮助某人:)

【讨论】:

  • 在 $("#owl-carousel").owlCarousel({}) 解决我在 owl carousel 中的问题之前感谢这个 $(document).ready(function() {})
【解决方案2】:

您应该检查您的 javascript 文件,因为您似乎在某处有一个额外的初始化程序,Chrome 开发工具错误就是证明:

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

这和你的完全不同

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

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

【讨论】:

  • 更改了初始化行以调用类 .owl-carousel 并在 javascript 控制台中仍然给出相同的错误:Uncaught TypeError: undefined is not a function
  • 这可能是一个很长的镜头,但您可能错过了 app/views/layouts/application.html.erb 文件中的 &lt;%= javascript_include_tag "application" %&gt; 行?
【解决方案3】:

我认为你在

中有一个额外的引号
<div class="owl-carousel" col-lg-12"> 

而且渲染不正确。改为

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

【讨论】:

  • 您忘记添加应该更改的内容;)
【解决方案4】:

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

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

【讨论】:

  • 全面改变了这一点,添加了文件:owl.carousel.js ~&gt; vendor/assets/javascriptsowl.carousel.cssowl.theme.css ~&gt; vendor/assets/stylesheets。也移除了宝石。重新启动,检查标题中的源代码并查看对文件的引用,但仍然有相同的结果。
猜你喜欢
  • 2022-06-28
  • 1970-01-01
  • 2016-09-16
  • 2021-10-04
  • 1970-01-01
  • 2019-06-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多