Question

我正在尝试使用Bootstrap Caroussel向我的网页添加幻灯片，但似乎照片没有滑动，只显示第一张照片。并且底部和两侧的按钮都不能正常工作。任何人都想查看我的代码并帮助我吗？

＆＃13;

</!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=divice-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
    }
  </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>
    <div class="carousel-inner">
      <div class="item active">
        <img src="images/reverse1.jpg" class="img-responsive">
      </div>
      <div class="item">
        <img src="images/12976329_224255987939469_1210159874_n.jpg" class="img-responsive">
      </div>
      <div class="item">
        <img src="images/13098983_106200126454398_1338693822_n.jpg" width="450" height="450">
      </div>
      <div class="item">
        <img src="images/13166635_879641332146032_791969762_n.jpg" width="450" height="450">
      </div>
    </div>
    <!-- Left and right controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
  <script src="jquery-1.12.3.js"></script>
  <script>
    $('#myCarousel').carousel();
  </script>

＆＃13;

Answer 1

您错过了bootstrap.min.js

</!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=divice-width, initial-scale=1">
  <link rel="stylesheet" href="main.css" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
    }
  </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>
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
      </div>
      <div class="item">
        <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
      </div>
      <div class="item">
        <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
      </div>
      <div class="item">
        <img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
      </div>
    </div>
    <!-- Left and right controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script>
    $('#myCarousel').carousel();
  </script>

Bootstrap caroussel没有滑动

1 个答案: