Question

我的旋转木马不起作用。问题是，当我点击指标时，它不会移动。我也尝试包括carousel.js，但都是徒劳的。这是片段：

＆＃13;

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicator-->
  <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>
  <!-- wrapper of slide-->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../images/banner/slide1.jpg">
    </div>
    <div class="carousel-caption">
      <h4>Find Your Agent Here</h4>
      <a class="btn btn-info">Find Agent</a>
    </div>
    <div class="item">
      <img src="../images/banner/slide2.jpg">
    </div>
    <div class="item">
      <img src="../images/banner/slide3.jpg">
    </div>
  </div>
  <!-- Carousel Controler-->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div><!-- End of Carousel -->

＆＃13;

Answer 1

这应该会有所帮助。

http://getbootstrap.com/javascript/#carousel

您需要包含jquery和bootstrap才能使用该插件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicator-->
  <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>
  <!-- wrapper of slide-->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg">
    </div>
    <div class="carousel-caption">
      <h4>Find Your Agent Here</h4>
      <a class="btn btn-info">Find Agent</a>
    </div>
    <div class="item">
      <img src="http://im.rediff.com/news/2016/mar/01smith1.jpg">
    </div>
    <div class="item">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
    </div>
  </div>
  <!-- Carousel Controler-->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- End of Carousel -->

Bootstrap Carousel问题：指示符点击

1 个答案: