html - 如何修复 Bootstrap 轮播?

标签 html twitter-bootstrap carousel

Bootstrap 轮播未正常运行。它只显示一张图片,但没有变化。

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>

最佳答案

你的 bootstrap styles import 好像有误,换成

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

关于html - 如何修复 Bootstrap 轮播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57475725/

相关文章:

jquery - 无法使用jquery更改css中div的位置

javascript - Bootstrap Modal 上的单独背景淡入淡出

javascript - 更改折叠菜单的背景颜色

html - 在 disabled=true 文本框上应用文本颜色

HTML CSS 主体自动调整大小

php - 语法错误,意外 'endforeach' (T_ENDFOREACH),期望文件结尾(在我的 slider View 中 - 轮播)

html - Bootstrap : container/columns inside carousel

css - 相当于移动应用程序的悬停

JQuery 切换隐藏了 div 元素

twitter-bootstrap - 将焦点从固定页眉或固定页脚下移出