Question

**你好伙计们，我真的需要你的帮助。我是初级级编码员，所以请原谅我所犯的任何错误。

所以我正在编写一个特定的网页，我需要在面板主体内部使用旋转木马插件，比如最新的照片。下面输入的代码是我使用过的。旋转木马不会工作。我需要旋转木马一旦网页加载就开始工作，并在悬停时暂停。我正在使用Bootstrap。我不知道它是否需要单独的jquery代码才能工作。如果是这样，请帮助我。提前致谢。 **

<div id="myCarousel" class="carousel slide">
    <!-- Carousel indicators -->
    <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="item active">
            <img src="pics/Sunset.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="pics/Winter.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="pics/Water lilies" alt="Third slide">
        </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>

Answer 1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style type="text/css">
        .item
        {
            background-color: blue;
        }
    </style>
</head>
<body>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <center><h1>First</h1></center>
      </div>

      <div class="item">
        <center><h1>Second</h1></center>
      </div>

      <div class="item">
         <center><h1>Third</h1></center>
      </div>

      <div class="item">
        <center><h1>Fourth</h1></center>
      </div>
    </div>

    <!-- Left and right controls -->
    <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>

    <script src="js/jquery.min.js"></script>
</body>
</html>

http://www.jayakumar.xyz/2015/11/carousel-plugin-not-working.html

Answer 2

试试这段代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <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>
</div>

</body>
</html>

Answer 3

让我帮你:)

好吧，bootstrap carousel没有其他库可以工作。但是它需要jquery，在这里我已经准备好了文档触发了carousal事件。

它在悬停时暂停，它是此轮播的默认属性。

ps：在bootstrap.js之前放置jquery.js，如演示中所示。

更多检查我的小提琴http://fiddle.jshell.net/Jinukurian7/vsd2Lsa6/1/

$(document).ready(function() {
  $('.carousel').carousel({
    interval: 3000
  });

  $('.carousel').carousel('cycle');
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>


  <div id="myCarousel" class="carousel slide">
    <!-- Carousel indicators -->
    <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="item active">
        <img src="https://c2.staticflickr.com/4/3491/4065563881_d023aaf065.jpg" alt="First slide">
      </div>
      <div class="item">
        <img src="http://www.vectordiary.com/isd_premium/048-hot-air-balloon/hot-air-balloon.jpg" alt="Second slide">
      </div>
      <div class="item">
        <img src="https://turcotravel.com/wp-content/uploads/2015/03/cappadocia.jpg" alt="Third slide">
      </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>
</body>

</html>

Carousel插件不工作

3 个答案: