时间戳

首页 > 解决方案 > 引导轮播不显示

jquery - 引导轮播不显示

问题描述

由于某些无法识别的原因，我的 Bootstrap 轮播只显示了它的图像内容，没有任何轮播界面。当我弄乱控制台时，bootstrap.js 和 jQuery 中的所有其他函数似乎都加载得很好。我也在其他浏览器中尝试过，但没有效果。我包括了我的实现，以防我在那里做错了什么。

<!doctype html>
<html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
                crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="assets/css/style.css">
            <link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
            <title>King City</title>
        </head>
    <body>
        <div id="masterContainer" class="container-fluid">
     <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="assets/images/150-2 copy.jpeg" alt="First Slide">
                    </div>
                    <div class="item">
                        <img src="assets/images/150-3 copy.jpeg" alt="Second Slide">
                    </div>
                    <div class="item">
                        <img src="assets/images/150-4 copy.jpeg" alt="Third Slide">
                    </div>
                    <div class="item">
                        <img src="assets/images/150-5 copy.jpeg" alt="Fourth Slide">
                    </div>
                </div>
            </div>
         </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </body>

</html>

结果

小提琴

标签： jqueryhtmltwitter-bootstrapbootstrap-4

解决方案

这是正确的代码：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
  <title>King City</title>
</head>

<body>
  <div id="masterContainer" class="container-fluid">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="assets/images/150-2.jpeg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="assets/images/150-3.jpeg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="assets/images/150-4.jpeg" alt="Third slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="assets/images/150-5.jpeg" alt="Third slide">
        </div>
      </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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>

</html>

注意：从您的图像名称中删除空格和“复制”一词。

现场演示：

推荐阅读