트위터 부트 스트랩 회전 목마를 레일 앱에 추가하기

Question

몇 주 전에 레일에서 루비를 시작했습니다. 현재 레일즈 작곡가 (twitter-bootstrap-rails gem을 사용하는)를 사용하여 블로그를 만들고 있습니다. 내 응용 프로그램보기 (예 : 내 application.html.erb)에 부트 스트랩 회전식 고리를 추가하고 싶습니다.

트위터 부트 스트랩 설명서에서 고전 html 코드를 추가하려고했지만 이미 오른쪽 및 왼쪽 컨트롤러 버튼이 있습니다. 사진이 표시되지 않습니다.

누군가 나를위한 해결책이 있습니까?

추신 : 현재 부트 스트랩 디자인에 Sass를 사용하고 있습니다.

EDIT 2013년 2월 11일 => 여기 내 코드는 당신이 내 실수가

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

편집이 손쉽게 찾을 수 있기를 바랍니다 : 그리고이는 크롬에 보이는 방법입니다 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

app/assets/javascripts/application.js에 부트 스트랩에 대한 참조가 있습니까?

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

및 필요에가 없습니다 참고로 내 회전 목마

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

메신저를 보여주기 위해 "assets/images"를 지정하십시오. 나이 폴더. 1.jpg이면 충분합니다!