admin管理员组

文章数量:1287790

Owl Carousel isn't working with my rails install. It's not showing up on my test page and this error appears in the Chrome developers console:

Uncaught TypeError: undefined is not a function

I've followed the directions on

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

Here is the relevant code in 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>

As of right now, this is what the area looks like (should have content in the white area):

Owl Carousel isn't working with my rails install. It's not showing up on my test page and this error appears in the Chrome developers console:

Uncaught TypeError: undefined is not a function

I've followed the directions on https://github./acrogenesis/owlcarousel-rails

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

Here is the relevant code in 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>

As of right now, this is what the area looks like (should have content in the white area):

  • javascript
  • jquery
  • ruby-on-rails
  • owl-carousel
Share Improve this question edited Mar 11, 2015 at 22:34 Conspicuous Compiler 6,4691 gold badge42 silver badges53 bronze badges asked Mar 11, 2015 at 21:32 Godzilla74Godzilla74 2,5123 gold badges33 silver badges72 bronze badges 1
  • jquery.turbolinks says to place require turbolinks after all of your other require statements. Have you tried doing so? – Conspicuous Compiler Commented Mar 11, 2015 at 22:42
Add a ment  | 

4 Answers 4

Reset to default 5

Just in case anyone else having this issue es across this page, I built out a quick repo that demonstrates a working version of the owlcarousel-rails gem embedded in a bootstrap grid. I also explain the changes I made in the README.

I know sometimes one needs to see all the working parts together to figure out exactly where one is going wrong.

REPO HERE: https://github./EliCash82/carousel-optimization

Take a look in app/assets/javascripts, app/assets/stylesheets, and most importantly app/views/static_pages/carousel_in_grid.html.erb

Hope this helps someone out :)

You should check your javascript files as it seems you have an extra initializer somewhere, as evidenced by the Chrome Dev Tools error:

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

which is quite different from your

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

The error is ocurring because $('#owl-carousel') returns a null object, since you have no object with id='owl-carousel'

I think you have an extra quotation mark in 

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

and it's not rendering correctly. change to 

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

I used owl carousel with one of my rails projects. You needn't install the gem. Try removing the line from your Gemfile. Make sure you have the correct path to owl.carousel.js in application.js and owl.*.css in application.css. And restart the server.

Also, I would remend moving any external js (owl.carousel.js) and css (owl.carousel.css, owl.theme.css) to vendor/assets/.

本文标签： javascriptOwlCarousel not working with RailsStack Overflow

版权声明：本文标题：javascript - Owl-Carousel not working with Rails - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741320950a2372200.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。