0

I am using Rails 3.2.12, Ruby 2.0, with Twitter Bootstrap Gem, and I am trying to implement Carousel div to my App, but it is looking horrible at the moment, only two big buttons are shown, one at left part of the screen, other on the right.

Is there are any successful examples of how to correctly implement Carousel? Should I add additional div's to my code?

I got no custom css in my bootstrap_and_overrides.css.less file except this one:

body { padding-top: 60px;}

</head>
<body>

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="<%= root_path %>">ProjectX</a>
      <div class="container nav-collapse">
       <ul class="nav">
         <% if current_user %>
            <li class="nav-header"><%= current_user.email %></li>
            <li><%= link_to "Log out", logout_path %></li>
          </ul>
        <% else %>
        <ul class="nav">
          <li><%= link_to "Log In", login_path  %></li>
          <li><%= link_to "Sign Up", signup_path %></li>
          <li><%= link_to "Forum", "/path3"  %></li>
        </ul>
        <% end %>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>




<div id="myCarousel" class="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
   Carousel items
  <div class="carousel-inner">
    <div class="active item"></div>
    <div class="item">...</div>
    <div class="item">...</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>



<div class="container">
    <div class="row">
      <div class="span9">
        <%= bootstrap_flash %>
        <%= yield %>
      </div>
      <div class="span3">
        <div class="well sidebar-nav">
          <ul class="nav nav-list">
            <li class="nav-header">Sidebar</li>
            <li><%= link_to "News", "/path1"  %></li>
            <li><%= link_to "Recent", "/path2"  %></li>
            <li><%= link_to "Hot Topics", "/path3"  %></li>
          </ul>
        </div><!--/.well -->
      </div><!--/span-->
    </div><!--/row-->

  <footer>
    <p>&copy;Iron Man</p>
  </footer>

</div> <!-- /container -->

<!-- Javascripts
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<%= javascript_include_tag "application" %>

4

1 回答 1

1

专注于<div class="carousel-inner"。在其中，您会注意到三个带有class="item". 这些嵌套类中的每一个都需要引用一个图像才能让您的轮播工作。

您目前在这些 div 标签之间没有任何内容：

<div class="carousel-inner">  
  <div class="active item"></div> 
  <div class="item">...</div>  
  <div class="item">...</div> 
</div>

这是您要执行的操作的示例：

<div class="carousel-inner">  
  <div class="active item"><img src='https://dev.twitter.com/sites/default/files/images_platform_object/arctic-blue-bird.jpg?1334604325'></div> 
  <div class="item"><img src='https://dev.twitter.com/sites/default/files/images_platform_object/missouri_meadow_lark.jpg?1334604578'></div>  
  <div class="item"><img src='https://dev.twitter.com/sites/default/files/images_platform_object/yellow_flycatcher.jpg?1334605975'></div> 
</div>

我包含的图像来自 Twitter，它们指定了绝对路径。换句话说，您可以将此代码剪切并粘贴到轮播模板的其余部分以查看图像。

于 2013-03-06T22:22:22.077 回答