Godzilla74 Godzilla74 - 1 month ago 17
Javascript Question

Owl-Carousel not working with Rails

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:

Chrome console error highlighting call to .owlCarousel()


Uncaught TypeError: undefined is not a function


I've followed the directions on https://github.com/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):
Screenshot of page showing only page title

Answer

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'