首页 > 解决方案 > Django Bootstrap Carousel 不会骑

问题描述

这是我建立网站的第一个项目。我一直在关注这些教程。我浏览了 Bootstrap 组件页面,找到了我想使用的 Carousel 方法(仅限幻灯片) 。我将其复制并粘贴到我的代码中。第一个图像显示是正确的,因为它处于活动状态,但轮播不会滑动到下一个图像。第一个代码块显示了一个总结版本。第二个代码块是在运行之后python manage.py runserver。第三段代码是当我打开 IP 地址链接时。我不确定我做错了什么。有什么建议么?如果您需要更多信息,请告诉我。

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

<head>
<title>AeroTract</title>
    <meta charset="utf-8" />
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type = "text/css"/>
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">

    <style type="text/css">
        html,
        body {
          height:100%
        }
    </style>
</head>

<body class="body" style="background-color:#FFF8DC">            <!-- Main page background color -->
    <div class="container-fluid" style="min-height:95%; ">      <!-- Footer Height -->
        <div class="row">
            <div class = "col-sm-2"> </div>
            <div class="col-sm-8">
                <br>
                    <div id="mainCarousel" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="{% static 'img/Forestry.png' %}" alt="First slide">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="{% static 'img/Agricultural.png' %}" alt="Second slide">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="{% static 'img/Industrial.png' %}" alt="Third slide">
                            </div>
                        </div>
                    </div>
                <br>
            </div>
        </div>
    </div>
</body>

</html>
(base) C:\Users\name\PycharmProjects\Django_tutorials\mysite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
May 07, 2020 - 14:46:06
Django version 3.0.6, using settings 'mysite.settings'
Starting development server at http://#########/
Quit the server with CTRL-BREAK.
[07/May/2020 14:46:42] "GET / HTTP/1.1" 200 3408

标签: djangobootstrap-4pycharmcarousel

解决方案


您只包括引导程序中的 css。我相信你也需要javascript。您可能需要添加以下脚本:

https://getbootstrap.com/docs/4.4/getting-started/introduction/#js


推荐阅读