2016-03-06 5 views
0

Я использую Flexslider 2 Rails Gem от https://github.com/constantm/Flexslider-2-Rails-Gem.Flexslider 'CSS не загружен в мое приложение Rails

Как сообщалось в документации, я назвал 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 

Мое приложение/активы/таблицы стилей/application.css

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

PS .: Я пробовал требуют FlexSlider (без расширения) тоже.

Мои приложения/активы/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 
}); 

Ошибок в консоли нет.

Благодарим за помощь.

+0

Вы уверены, что загружен пользовательский JS? Вы добавили к нему инструкцию console.log()? Если вы не видите никаких ошибок на консоли, это заставляет меня думать, что код не запускается вообще. Где размещается этот JS-код? Проверьте код в консоли. И проверьте, действительно ли селектор соответствует любым элементам. –

+0

Да pascal betz, JS работает. Проблема была в том, что CSS был в неправильном файле. Во многих случаях вызов css в application.css прав, но в моем случае у меня есть несколько сайтов в моем приложении, у которых есть определенные JS и CSS для предварительного компиляции. Я вызываю css и js в этих конкретных файлах вместо приложения. (JS | CSS), и он работает. Спасибо за вашу помощь. –

ответ

0

[РЕШИТЬ]

Мое приложение имеет несколько "конкретных страниц". Приложение имеет несколько сайтов, независимых друг от друга.

В моих приложение/активы/таблицы стилей папки и приложение/активы/JavaScript папка У меня есть еще 1 CSS и JS вне приложения. (JS | CSS)

Есть sitetype.css И sitetype .js.

Я назвал требуют flexslider.css в sitetype.css И // = требуется jquery.flexslider в sitetype.js и она работает.

Спасибо всем за помощь.

0

Вы пробовали:

*= require flexslider.sass

Выстрел в темноте после просмотра камень вы используете

+0

Ну, может быть, не так, как я смотрю на это больше, извините –

0

Вы только включает библиотеку и обеспечение разметки. Но вы не «Поднесите слайдер». См шаг 3 https://www.woothemes.com/flexslider/

+0

Моя вина, я забыл написать это в своем ответе, но я уже «подключил слайдер». Я собираюсь обновить свой ответ этими данными. Я пытаюсь использовать рейк-активы: прекомпилировать сейчас. –