не удалось реализовать слайдер в RoR с использованием конвейера активов

Question

Я не могу связать файл css и javascript с использованием конвейера активов. Я новичок, поэтому помогаю мне в местах, где я делаю очень незначительные ошибки. Я создал основную статическую страницу, и я пытаюсь добавить слайдер на странице. Ползунок от http://www.basic-slider.com/. Вот код в home.html.erb <h1>StaticPages#home</h1> <p>Find me in app/views/static_pages/home.html.erb</p> <div id="container"> <h2>Fade Example</h2>

<!-- Outer wrapper for presentation only, this can be anything you like --> 
    <div id="banner-fade"> 

    <!-- start Basic Jquery Slider --> 
    <ul class="bjqs"> 
     <li><img src="banner01.jpg" title="Automatically generated caption"></li> 
     <li><img src="banner02.jpg" title="Automatically generated caption"></li> 
     <li><img src="banner03.jpg" title="Automatically generated caption"></li> 
    </ul> 
    <!-- end Basic jQuery Slider --> 

    </div> 
    <!-- End outer wrapper --> 

    <script class="secret-source"> 
    jQuery(document).ready(function($) { 

     $('#banner-fade').bjqs({ 
     height  : 320, 
     width  : 620, 
     responsive : true 
     }); 

    }); 
    </script>` 

Я скопировал основные файлы, необходимые для слайдера для работы в активах/JavaScript и активы/таблицы стилей

Answer 1

Я предполагаю, ваши изображения находятся в каталоге app/assets/images/. Источник изображения должен быть обновлен, чтобы включить в него путь assets/. Если бы вы использовали image_tag('banner01.jpg'), это было бы позаботиться о вас рельсами.

<!-- Outer wrapper for presentation only, this can be anything you like --> 
    <div id="banner-fade"> 

    <!-- start Basic Jquery Slider --> 
    <ul class="bjqs"> 
     <li><img src="assets/banner01.jpg" title="Automatically generated caption"></li> 
     <li><img src="assets/banner02.jpg" title="Automatically generated caption"></li> 
     <li><img src="assets/banner03.jpg" title="Automatically generated caption"></li> 
    </ul> 
    <!-- end Basic jQuery Slider --> 

    </div> 
    <!-- End outer wrapper --> 

    <script class="secret-source"> 
     jQuery(document).ready(function($) { 

     $('#banner-fade').bjqs({ 
     height  : 320, 
     width  : 620, 
     responsive : true 
     }); 

    }); 
    </script>