Question

我的引导轮播可以正确呈现，但是它不会自动滑动，当我单击其中一个箭头时，它会稍微向下滚动页面，否则无任何作用。我已仔细检查以确保将一项设置为活动状态，并且列表项具有正确的数据目标。

我的图像也很好，所以无论如何都不会。

<div id="mainPics" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                <ol class="carousel-indicators">
                <li data-target="#mainPics" data-slide-to="0" class="active"></li>
                <li data-target="#mainPics" data-slide-to="1"></li>
                <li data-target="#mainPics" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/ball.png" alt="Chania">
                    </div>

                    <div class="item">
                        <img src="img/ball.png" alt="Chicago">
                    </div>

                    <div class="item">
                        <img src="img/ball.png" alt="New York">
                    </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#mainPics" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#mainPics" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
                </a>
            </div>

Answer 1

导入jQuery后，需要导入Bootstrap JavaScript CDN。对于Bootstrap 3.4.0，您可以添加以下内容：<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>。

仅导入jQuery仅使您可以访问jQuery库，该库本身不执行任何操作。 Bootstrap仍然拥有自己的JavaScript文件，该文件包含动画的所有代码。由于Bootstrap使用的是jQuery而不是普通的JS，因此请确保在导入jQuery后之后导入CDN，否则它将无法正常工作。

nav {
  width: 70%;
  margin: auto;
  margin-top: 50px;
}

.navbar-inverse .navbar-nav>li>a {
  color: white;
}

.navbar-inverse .navbar-brand {
  color: white;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: darkred;
}

.navbar-inverse .navbar-brand:hover {
  color: darkred;
}

body {
  background: url(../img/back.jpg);
  background-color: black;
  background-position: center;
  background-size: 100% 100%;
  min-height: 1000px;
}

#content {
  background: url(../img/logo.png) no-repeat;
  background-size: 600px 600px;
  background-position: center;
  background-color: #222;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  border-color: #080808;
  width: 70%;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 50px;
  opacity: 0.95;
  min-height: 1000px;
}

p {
  color: white;
  width: 90%;
  margin: auto;
  font-size: 1.5em;
  margin-top: 15px;
}

h1 {
  color: white;
  text-align: center;
  padding-top: 15px;
  margin-bottom: 0px;
}

footer {
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  color: white;
}

#mainPics {
  margin: auto;
  margin-top: 15px;
  width: 70%;
  min-height: 500px;
}

#item {
  margin: auto;
  width: 80%;
}

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  margin: auto;
  margin-top: 15px;
  margin-bottom: 15px;
}

<!DOCTYPE html>
<html>

<head>
  <title>HMICSL - Home</title>
  <link rel="shortcut icon" href="img/ball.png" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/universal.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <nav class="mx-auto navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html" id="deviceTypeNav">Home Page</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="teams.html">Teams</a></li>
      </ul>
    </div>
  </nav>
  <div id="content">

    <h1>Welcome to HMICSL</h1>

    <div id="mainPics" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#mainPics" data-slide-to="0" class="active"></li>
        <li data-target="#mainPics" data-slide-to="1"></li>
        <li data-target="#mainPics" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="Chania">
        </div>

        <div class="item">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg/220px-Aspen-PopulusTremuloides-2001-09-27.jpg" alt="Chicago">
        </div>

        <div class="item">
          <img src="http://learnphotoediting.org/wp-content/uploads/tree-picture-live-oak-trees-for-sale-fast-growing-trees.jpg" alt="New York">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#mainPics" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#mainPics" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</body>
</html>

Bootstrap轮播渲染，但不滑动。左右图标也不起作用

1 个答案: