Flexslider' CSS 未加载到我的 Rails 应用程序中
Flexslider' CSS is not loaded on my Rails Application
我正在使用来自 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
});
没有控制台错误。
感谢您的帮助。
你试过了吗:
*= require flexslider.sass
通过您正在使用的 gem 查看后在黑暗中拍摄
您只包含库并提供标记。但你没有 "Hook up the slider"。请参阅步骤 3 https://www.woothemes.com/flexslider/
[已解决]
我的应用有一些 "specific pages"。该应用程序有多个彼此独立的站点。
在我的 app/assets/stylesheets 文件夹中 和 app/assets/javascript 文件夹 我还有 1 个 CSS 和JS超越应用。(JS|CSS)
有 sitetype.css 和 sitetype.js。
我在 sitetype.css 中调用了 require flexslider.css AND //= require jquery.flexslider 在 sitetype.js 中有效。
感谢大家的帮助。
我正在使用来自 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
});
没有控制台错误。
感谢您的帮助。
你试过了吗:
*= require flexslider.sass
通过您正在使用的 gem 查看后在黑暗中拍摄
您只包含库并提供标记。但你没有 "Hook up the slider"。请参阅步骤 3 https://www.woothemes.com/flexslider/
[已解决]
我的应用有一些 "specific pages"。该应用程序有多个彼此独立的站点。
在我的 app/assets/stylesheets 文件夹中 和 app/assets/javascript 文件夹 我还有 1 个 CSS 和JS超越应用。(JS|CSS)
有 sitetype.css 和 sitetype.js。
我在 sitetype.css 中调用了 require flexslider.css AND //= require jquery.flexslider 在 sitetype.js 中有效。
感谢大家的帮助。