javascript - Owl Carousel 可以工作，但在 Rails 4 应用程序中表现得非常奇怪

Question

我正在尝试实现 Owl Carousel。所有文件都工作正常，但其行为存在严重错误。

这是这样的:

每张图像都有自己的 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)