Search code examples
ruby-on-railsrubyflexslider

Flexslider' CSS is not loaded on my Rails Application


I am using the Flexslider 2 Rails Gem from https://github.com/constantm/Flexslider-2-Rails-Gem.

As informed in documentation, I called the JS and CSS, but only the CSS is not loaded (yes, JS works).

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

My app/assets/stylesheets/application.css

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

PS.: I tried require flexslider (without extension) too.

My 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

My HTML (I stripped others li tags here, but is the same)

<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>

My custom .JS

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

There are no console errors.

Thanks for your help.


Solution

  • [SOLVED]

    My app has some "specific pages". The app has multiple sites independent each other.

    In my app/assets/stylesheets folder and app/assets/javascript folder I have 1 more CSS and JS beyond the application.(JS|CSS)

    There are sitetype.css AND sitetype.js.

    I called require flexslider.css in sitetype.css AND //= require jquery.flexslider in sitetype.js and it works.

    Thanks all for the help.