2016-03-06 31 views
0

我正在使用Flexslider 2 Rails Gemhttps://github.com/constantm/Flexslider-2-Rails-Gem。在文档中告诉我,我打电话给JS和CSS,但只有CSS没有加载(是的,JS工程)。Flexslider的CSS未加载到我的Rails应用程序

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 

我的应用程序/资产/样式表/ application.css

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

PS:我试过需要flexslider(不包括扩展名)太。

我的应用程序/资产/ Java脚本/ 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(我剥夺他人李标签这里,但是是一样的)

<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 
}); 

没有控制台错误。

感谢您的帮助。

+0

你确定你的自定义JS被加载?你有没有添加console.log()语句? 如果您在控制台上没有看到任何导致我认为代码完全未触发的错误。这个自定义JS代码放在哪里? 测试控制台中的代码。并检查选择器是否实际匹配任何元素。 –

+0

是的pascal betz,JS的作品。问题是:CSS是在错误的文件中。在很多情况下,在application.css中调用css是正确的,但在我的情况下,我的应用程序中有多个站点,它具有特定的JS和CSS以进行预编译。我在这个特定的文件中调用了css和js,而不是应用程序(JS | CSS),它可以工作。谢谢你的帮助。 –

回答

0

[解决]

我的应用程序有一些 “特殊页面”。该应用程序有多个网站相互独立。

在我应用程序/资产/样式表文件夹应用程序/资产/ JavaScript的文件夹我有1更多的CSS和JS不受应用。(JS | CSS)

有sitetype.css和sitetype .js文件。

我叫需要flexslider.csssitetype.css// =需要在jquery.flexslider sitetype.js和它的作品。

谢谢大家的帮助。

0

您是否尝试过:你使用

+0

嗯,也许不是因为我更多地看它,对不起 –

0

*= require flexslider.sass

瞎猜通过宝石寻找后,您只包括库,并提供了标记。但你不要“连接滑块”。请参阅步骤3 https://www.woothemes.com/flexslider/

+0

我的错,我忘了在我的答案中写下这个,但我已经“连接滑块”了。我将用这些数据更新我的答案。我正在尝试耙资产:现在预编译。 –

相关问题