Menu
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.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):
852
Just in case anyone else having this issue comes 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.com/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 :)
170
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'
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
