title: Adding Twitter Bootstrap Carousel to rails app
body: <p>I just started ruby on rails a few weeks ago, I'm currently building a blog using rails composer ( which uses twitter-bootstrap-rails gem ). I want to add the bootstrap carousel to my application view ( ie to my application.html.erb) </p>
  
  <p>I already tried to add the classic html code from the twitter bootstrap documentation but I just get the right and left controller buttons with no pictures displayed.</p>
  
  <p>Does somebody have the solution for me ? </p>
  
  <p>PS : I currently use Sass for my bootstrap design. </p>
  
  <p>EDIT 02-11-2013 => Here's my code hope you can find what my mistake is </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;!--  Carousel --&gt;
    &lt;!--  consult Bootstrap docs at
          http://twitter.github.com/bootstrap/javascript.html#carousel --&gt;
    &lt;div id="this-carousel-id" class="carousel slide"&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="active item"&gt;
            &lt;a&gt;&lt;img src="assets/images/1.jpg" alt="Antennae Galaxies" /&gt;&lt;/a&gt;
  
          &lt;div class="carousel-caption"&gt;
            &lt;p&gt;The Antennae Galaxies&lt;/p&gt;
            &lt;p&gt;&lt;a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/"&gt;Hubblesite.org &amp;raquo;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
            &lt;a&gt;&lt;img src="assets/images/2.jpg" alt="Carina Caterpillar" /&gt;&lt;/a&gt;
  
          &lt;div class="carousel-caption"&gt;
            &lt;p&gt;Carina Nebula: The Caterpillar&lt;/p&gt;
            &lt;p&gt;&lt;a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/"&gt;Hubblesite.org &amp;raquo;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- .carousel-inner --&gt;
      &lt;!--  next and previous controls here
            href values must reference the id for this carousel --&gt;
        &lt;a class="carousel-control left" href="#this-carousel-id" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
        &lt;a class="carousel-control right" href="#this-carousel-id" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
    &lt;/div&gt;&lt;!-- .carousel --&gt;
    &lt;!-- end carousel --&gt;
      &lt;div class="content"&gt;
         &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
            &lt;%= render 'layouts/messages' %&gt;
            &lt;%= yield %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;footer&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!--! end of .container --&gt;
  &lt;/div&gt; &lt;!--! end of #main --&gt;
  
  &lt;script&gt;
  $(function(){
  $('#this-carousel-id').carousel();
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT 2 : And this is how it looks like on Chrome : <a href="http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png" rel="nofollow">http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png</a></p>