Owl Carousel is working but acting extremely oddly in Rails 4 application

Question

I'm trying to implement Owl Carousel. All files are working correctly but there's something extremely wrong about it's behavior.

Here is what is looks like:

Each image has its own div, but Owl carousel is showing it as if it were just ONE image.

This is the code for it:

.post_image_description
            .owl-carousel#owl-example
                - @post_attachments.each do |p|
                    = image_tag p.image_url

My posts.js.coffee:

$ ->
    $("#owl-example").owlCarousel({

      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
      items: 1
  });

As for linking the scripts, I'm using a CDN to do so:

%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css"}
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css"}
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"}

Why are you adding the css files as a `script`? you should use `stylesheet_link_tag` check out this question: http://stackoverflow.com/questions/9643795/add-external-style-sheet-in-rails-project — Karim Tarek, Aug 26 '15 at 01:31

score 1 · Accepted Answer · answered Aug 26 '15 at 03:50

You're linking the external stylesheets wrong.

If you have something like:

= stylesheet_link_tag    'application'

Find every .css file that you have and add it to that, separated by a comma. Like:

= stylesheet_link_tag    'application', "some css file"

You can get rid of other %script in your code (for css files, leave the .js alone)

Owl Carousel is working but acting extremely oddly in Rails 4 application

1 Answers1