CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby-on-rails-4owl-carousel
Henry Lee
Henry Lee

Reputation: 831

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

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:

enter image description here

enter image description here

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"}

Upvotes: 1

Views: 110

Answers (1)

Loi Huynh
Loi Huynh

Reputation: 448

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)

Upvotes: 1

Related Questions