Owl Carousel 正在工作，但在 Rails 4 应用程序中表现非常奇怪

Question

我正在尝试实施 Owl 轮播。所有文件都正常工作，但它的行为有一些非常错误的地方。

这是它的样子：

每张图片都有自己的 div，但 Owl 轮播显示时就好像它只是一张图片。

这是它的代码：

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

我的posts.js.coffee:

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

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

至于链接脚本，我使用的是 CDN：

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

Answer 1

您错误地链接了外部样式表。

如果你有类似的东西：

= stylesheet_link_tag    'application'

找到您拥有的每个 .css 文件并将其添加到其中，以逗号分隔。喜欢：

= stylesheet_link_tag    'application', "some css file"

您可以删除代码中的其他 %script（对于 css 文件，保留 .js）

Owl Carousel 正在工作，但在 Rails 4 应用程序中表现非常奇怪

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

javascript

jquery

ruby-on-rails

ruby-on-rails-4

owl-carousel