如何修复引导轮播？答案

【问题标题】：How to fix bootstrap carousel?如何修复引导轮播？
【发布时间】：2019-08-13 19:28:00
【问题描述】：

引导轮播无法正常运行。它只显示一张图像，但并没有改变。

carousel 的代码是直接从 bootstrap 的文档中复制和粘贴的，我只是更改了图像。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Carousel</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link href="/static/css/index.css" rel="stylesheet">

        </style>
    </head>

    <body>
        <div id="carouselExampleSlideOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block" src="/static/images/Ditto.png" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block" src="/static/images/Ditto.png" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block" src="/static/images/Ditto.png" alt="Third slide">
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
</html>

【问题讨论】：

你能提供你找到这个代码的地方的链接吗？

标签： html twitter-bootstrap carousel

【解决方案1】：

您的引导样式导入似乎有误，将其替换为

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

并将您的脚本代码替换为以下内容：

<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

它应该可以解决问题！
可以参考https://getbootstrap.com/docs/4.0/getting-started/introduction/

【讨论】：

谢谢！在我添加这条线后，这三个图像确实合二为一。但是，它们并没有按应有的方式移动，您能告诉我为什么吗？
是的@LanceZhang，将您的脚本也替换为我在上面附加的页面中的脚本，我已经编辑了上面的答案