Question

我是一名学生，目前正开始学习编码。我在使用自举轮播时的最新工作中遇到问题。这是我的代码：

<!doctype html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="utf-8">
<!--BOOTSTRAP-->
<link href="cssboot/bootstrap.css" rel="stylesheet" type="text/css">
<!--MAIN CSS-->
<link href="cssmain/style.css" rel="stylesheet" type="text/css">
<!--FONT AWESOME-->
<link href="cssfont/all.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!--DOT NAV-->
<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>
<!--IMGS-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="myfullimg" src="img/1.jpg"/>
</div>
<div class="item">
<img class="myfullimg" src="img/2.jpg"/>
</div>
<div class="item">
<img class="myfullimg" src="img/3.jpg"/>
</div>
<div class="item">
<img class="myfullimg" src="img/4.jpg"/>
</div>
</div>
<!--NXT AND PREV BUTTONS-->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>  
</div>
</div>
</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.js"></script>

</body>
</html>

这是我的主要CSS：

@charset "utf-8";

.myfullimg {
width: 1347px;
height: 666px;
}

我也将此CSS文件用于其他html文件。该按钮来自引导程序，我做了一点自定义。

我的html代码基于youtube上的教程。这是链接：https://www.youtube.com/watch?v=1FnMDubA25A&t=0s&list=PL41lfR-6DnOovY0t3nBg8Zb6aqm_H70mR&index=22

但是，当我运行此代码时，图像会堆叠在一起，并且没有用于导航的按钮。我也无法单击点进行导航。

(web page zoom out to 25%)

You can see the dot navigation but when I click it nothing happens. (web page zoom to 100%)

我正在使用引导程序和jquery的当前版本。

Answer 1

您有几个问题。首先，也是最重要的是，您的Bootstrap版本和轮播的标记不匹配。

我建议同时使用两者中的最新版本。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://i.ibb.co/jzf0D5Q/1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://i.ibb.co/q1ZW1Jh/2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://i.ibb.co/H4pPKmD/3.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://i.ibb.co/6gS07xN/4.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

请注意，在关闭</body>之前，您应该在head和JavaScript中加载CSS。

最后但并非最不重要的是，您缺少popper(.min).js（在旧的4. *版本中为tether(.min).js）。没有它，Bootstrap JS（包括轮播）将无法工作。

如有疑问，请访问official Bootstrap网站以获取示例。

Answer 2

首先，我想让您知道您使用的是Alpha版本的引导程序，现在可以使用过时的4.2.x版本。

现在，如果您想使用轮播，则还必须包含tether.js，这样您的脚本链接将类似于

CMAKE_SYSTEM_NAME

您还可以下载tehter并像使用jquery和bootstrap.bundle一样在本地使用它。

如果要使用当前版本的引导程序，则必须使用Popper.js

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.js"></script>

如何修复自举轮播？

2 个答案: