Question

我正在使用https://github.com/constantm/Flexslider-2-Rails-Gem中的 Flexslider 2 Rails Gem 。

正如在文档中所知，我调用了JS和CSS，但只加载了CSS（是的，JS可以工作）。

ruby -v: ruby 2.2.1p85 (2015-02-26 revision 49769) [x86_64-darwin11.0]
rails -v: Rails 4.2.1
flexslider version: flexslider 2.2.0

我的app / assets / stylesheets / application.css

*= require pineapple
*= require font-awesome
*= require dropzone/basic
*= require application/style
*= require fancybox
*= require flexslider.css

PS：我也试过 require flexslider （没有扩展名）。

我的app / assets / javascripts / application.js

//= require jquery
//= require jquery_ujs
//= require jquery.slimscroll.min
//= require pineapple
//= require tinymce
//= require dropzone
//= require jquery-ui/sortable
//= require jquery-ui/effect-highlight
//= require jquery-ui/tooltip
//= require jquery.mjs.nestedSortable
//= require general
//= require maskedinput
//= require fancybox
//= require jquery.flexslider

我的HTML（我在这里删除了其他 li标记，但是相同）

<div id="carousel0" class="flexslider carousel">
    <ul class="slides">
        <li>
            <%=link_to '/page/dynamic' do %>
            <%=image_tag image_path('show-case-1.jpg'), alt: 'Show Case', title: 'Show Case', class: 'img-responsive' %>
            <%end%>
        </li>
    </ul>
</div>

我的自定义.JS

$('#carousel0').flexslider({
    animation: 'slide',
    itemWidth: 300,
    itemMargin: 100,
    minItems: 2,
    maxItems: 4,
    pauseOnHover: true,
    slideshowSpeed: 8000
});

没有控制台错误。

感谢您的帮助。

Answer 1

你试过了吗？

*= require flexslider.sass

在浏览了你正在使用的宝石后，在黑暗中拍摄

Answer 2

您只包括库并提供标记。但你不要“勾选滑块”。请参阅第3步https://www.woothemes.com/flexslider/

Answer 3

<强> [解决]

我的应用程序有一些＆＃34;特定页面＆＃34;。该应用程序有多个站点相互独立。

在我的 app / assets / stylesheets文件夹和 app / assets / javascript文件夹我还有1个CSS和JS超出应用程序。（JS | CSS）

有sitetype.css和sitetype.js。

我在 sitetype.js中 sitetype.css 和 // = require jquery.flexslider 中调用 require flexslider.css < / em>它有效。

感谢大家的帮助。

Flexslider的CSS未加载到我的Rails应用程序中

3 个答案: