Quantcast
Channel: User Misha Krul - Stack Overflow
Viewing all articles
Browse latest Browse all 42

owlCarousel is not a function in rails app

$
0
0

I have a rails app where I'm attempting to use an owl carousel to display a list of testimonials with images. I think I have everything set up correctly, but I'm still receiving a console error that "owlCarousel is not a function".

I have installed the gemfile correctly.

gemfile

gem 'owlcarousel-rails'

I'm pretty sure I have everything loaded into application.js.app/assets/javascripts/application.js

import "@hotwired/turbo-rails";import "controllers";import 'owl.carousel';//= require_tree .//= require jquery//= require owl.carousel//= require jquery_ujs//= require turbolinks

Same with the application scss file:app/assets/stylesheets/application.scss

@import "bulma";@import "font-awesome";@import "owl.carousel";@import "../stylesheets/main/main.scss"; * //= require jquery //= require jquery_ujs *= require_self *= require owl.carousel */

This is my main view, where I have the carousel.app/views/main/index.html.erb

<section class="testimonials-carousel-container"><div class="testimonials-carousel"><div id="owl-carousel"><div class="carousel-of-images"><div class="carousel-image">Item</div><div class="carousel-image">Item</div><div class="carousel-image">Item</div><div class="carousel-image">Item</div><div class="carousel-image">Item</div></div><div class="gradient-left"></div><div class="gradient-right"></div></div></div></section>

The function that controls the carousel:app/assets/javascripts/testimonials.js

$(document).ready(function () {  $("#owl-carousel").owlCarousel();});

Lastly, I am importing the testimonials.js at the bottom of app/views/main/index.html.erb:

<%= javascript_include_tag "testimonials" %>

I'm also noticing a ton of warnings in my JS output including the "owlCarousel is not a function" error. I'm not sure if some of these other warnings are impacting this.

enter image description here


Viewing all articles
Browse latest Browse all 42

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>