Добавление Twitter Bootstrap Carousel to rails app

Question

Я только что начал рубин на рельсах несколько недель назад, сейчас я создаю блог с использованием рельсового композитора (который использует жемчужину щеток-бутстрапов-рельсов). Я хочу добавить карусель для загрузки в свой вид приложения (то есть к моему application.html.erb)

Я уже пытался добавить классический html-код из документации по загрузке twitter, но я просто получаю правую и левую кнопки контроллера с изображения не отображаются.

Есть ли у кого-нибудь решение для меня?

PS: В настоящее время я использую Sass для моего дизайна ботстрапа.

EDIT 02-11-2013 => Вот мой код надеюсь, что вы можете найти то, что моя ошибка в том,

<div class="container"> 
    <!-- Carousel --> 
    <!-- consult Bootstrap docs at 
     http://twitter.github.com/bootstrap/javascript.html#carousel --> 
    <div id="this-carousel-id" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a> 

     <div class="carousel-caption"> 
      <p>The Antennae Galaxies</p> 
      <p><a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">Hubblesite.org &raquo;</a></p> 
     </div> 
     </div> 
     <div class="item"> 
      <a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a> 

     <div class="carousel-caption"> 
      <p>Carina Nebula: The Caterpillar</p> 
      <p><a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">Hubblesite.org &raquo;</a></p> 
     </div> 
     </div> 

    </div><!-- .carousel-inner --> 
    <!-- next and previous controls here 
      href values must reference the id for this carousel --> 
     <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a> 
    </div><!-- .carousel --> 
    <!-- end carousel --> 
    <div class="content"> 
     <div class="row"> 
     <div class="span12"> 
      <%= render 'layouts/messages' %> 
      <%= yield %> 
     </div> 
     </div> 
     <footer> 
     </footer> 
    </div> 
    </div> <!--! end of .container --> 
</div> <!--! end of #main --> 

<script> 
$(function(){ 
$('#this-carousel-id').carousel(); 
}); 
</script> 

</body> 
</html> 

EDIT 2: И это, как он выглядит на Chrome: http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png

Answer 1

Bootstrap Carousel in Rails suddenly stopped working

проверка выше ссылке, также вы добавить + в JQuery загрузки

<script> 
$(function(){ 
    $('#myCarousel').carousel(); 
}); 
</script> 

Answer 2

Имеет ли ваше приложение/активы/javascripts/application.js ссылку на бутстрап?

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require_tree . 

Мой карусельного в качестве ссылки:

   <div class="span8 welcome-image"> 


         <div id="myCarousel" 
         class="carousel slide"> 
         <!-- Carousel items --> 
         <div class="carousel-inner"> 
           <div class="active item"> 
             <a href="https://stackoverflow.com/users/sign_up"><img src="/pictures/1.png"> </a> 
           </div> 
           <div class="item"> 
             <a href="https://stackoverflow.com/users/sign_up"><img src="/pictures/2.png"> </a> 
           </div> 
           <div class="item"> 
             <a href="https://stackoverflow.com/users/sign_up"><img src="/pictures/3.png"> </a> 
           </div> 
           <div class="item"> 
             <a href="https://stackoverflow.com/users/sign_up"><img src="/pictures/4.png"> </a> 
           </div> 
           <div class="item"> 
             <a href="https://stackoverflow.com/users/sign_up"><img src="/pictures/WordcloudInsight.png"> </a> 
           </div> 
         </div> 
         <!-- Carousel nav --> 
         <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
         <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
       </div> 

Answer 3

вместо

img src="assets/images/1.jpg" alt="Antennae Galaxies", 

Используйте следующий тег изображения для рельсов:

link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"} 

и нет необходимости укажите «активы/изображения» для показа изображения e папка. достаточно 1.jpg!