引导轮播不显示答案

【问题标题】：Bootstrap Carousel does not show引导轮播不显示
【发布时间】：2018-07-19 02:59:46
【问题描述】：

由于某些无法识别的原因，我的 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>

Result

Fiddle

【问题讨论】：

我将 jQuery 库更改为未压缩版本，同样的问题仍然存在
您能否在代码中添加一个 jsfiddle 链接，将尝试提供可能的解决方案。
我刚刚添加了我的小提琴，如果看起来很乱很抱歉

标签： jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

这是正确的代码：

<!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>

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

LIVE DEMO:

【讨论】：

抱歉，这只是 Stack Overflow 中的拼写错误，我的 IDE 中的标签是正确的。我的控制台中没有任何错误。
现在可以了吗？
哦..不..明白了。您已包含 bootstrap 3 js 而不是 bootsrtap4 并且缺少类。我给你原件。
我找到了... Bootstrap .css 文件丢失了！事实上，它就在那里，但它是 Bootstrap 4 的一个......用<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 替换它——所以除了@Codegiant 的答案......它可以工作。
这是一个 CodePen 工作。