0

好的......这是我的代码......现在......当页面加载时第一个图像不会移动......但是一旦访问者选择下一个图像然后停止选择图像......轮播开始以每张图像的默认 5 秒自动循环。我根本不希望旋转木马自动循环。我希望网站访问者只有在单击下一步按钮时才能移动图像。

我错过了什么？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Home</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <script>
  $(function(){
    $('.carousel').carousel({
      interval: false
    });
  });
  </script>
</head>
<body>
  <div class="container">
    <header class="navbar navbar-fixed-top">
      <nav class="navbar-inner">



      </nav>
    </header>
    </div>

    <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">
              <!-- yeild goes here -->
              <h1><%= image_tag "logo.png", :title => "Home", :class => "logo" %></h1>
              <div id="myCarousel" class="carousel slide">
                <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>
                  <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                  <div class="active item"><%= image_tag "home_1.jpg", :title => "title", :class => "class" %></div>
                  <div class="item"><%= image_tag "home_2.jpg", :title => "title", :class => "class" %></div>
                  <div class="item"><%= image_tag "home_3.jpg", :title => "title", :class => "class" %></div>
                  <div class="item"><%= image_tag "home_4.jpg", :title => "title", :class => "class" %></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>
              <!-- yeild ends here -->
            </div>
          </div>
        </div>
      </div> <!--! end of .container -->
    </div> <!--! end of #main -->
    <div class="container">
      <footer class="navbar navbar-fixed-bottom"><!--! TODO footer goes here -->
        <nav class="navbar-inner">



        </nav>
      </footer>
    </div>
</body>
</html>
4

0 回答 0