将 Twitter Bootstrap Carousel 添加到 Rails 应用程序答案

【问题标题】：Adding Twitter Bootstrap Carousel to rails app将 Twitter Bootstrap Carousel 添加到 Rails 应用程序
【发布时间】：2013-02-11 00:58:22
【问题描述】：

几周前我刚刚开始使用 ruby on rails，我目前正在使用 rails composer（它使用 twitter-bootstrap-rails gem）构建一个博客。我想将引导轮播添加到我的应用程序视图（即我的 application.html.erb）

我已经尝试从 twitter bootstrap 文档中添加经典的 html 代码，但我只得到了左右控制器按钮，没有显示图片。

有人有我的解决方案吗？

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>

编辑 2：这就是它在 Chrome 上的样子：http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png

【问题讨论】：

你有代码可以给我们看吗？我们很难猜测。
仔细检查您的图像是否位于您的 assets/images 文件夹中，并且您使用正确的路径调用它们。

标签： ruby-on-rails carousel twitter-bootstrap-rails

【解决方案1】：

而不是

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

为rails使用以下图片标签：

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

并且不需要指定“assets/images”来显示图像文件夹。 1.jpg 就够了！

【讨论】：

【解决方案2】：

您的 app/assets/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="/users/sign_up"><img src="/pictures/1.png"> </a>
                                </div>
                                <div class="item">
                                        <a href="/users/sign_up"><img src="/pictures/2.png"> </a>
                                </div>
                                <div class="item">
                                        <a href="/users/sign_up"><img src="/pictures/3.png"> </a>
                                </div>
                                <div class="item">
                                        <a href="/users/sign_up"><img src="/pictures/4.png"> </a>
                                </div>
                                <div class="item">
                                        <a href="/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>

【讨论】：

是的，我的 app/assets/javascripts/application.js 看起来完全一样。我会尝试添加到我的应用程序视图！

【解决方案3】：

Bootstrap Carousel in Rails suddenly stopped working

检查上面的链接，你也添加了这个+是jquery加载

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

【讨论】：