CODEWITHSUNDEEP
djangobootstrap-4pycharmcarousel
Binx
Binx

Reputation: 414

Django Bootstrap Carousel wont ride

This is my first project with building a website. I have been following these tutorials. I browsed through the Bootstrap components page and found a Carousel method (slides only) that I wanted to use. I copied and pasted it into my code. The first image shows up which is correct, because it is active, but the Carousel does not slide to the next image. The first code block shows a summed up version. The second block of code is after running python manage.py runserver. The third block of code is when I open the IP address link. I am not sure what I am doing wrong. Any suggestions? Let me know if you need some more information.

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

Upvotes: 0

Views: 457

Answers (2)

Erdem Ok&#231;uoğlu
Erdem Ok&#231;uoğlu

Reputation: 1

In my experience popper.js.min file was apparently clashing with bootstrap. Disabling that solved the problem.

Upvotes: 0

kvothe__
kvothe__

Reputation: 661

You are only including the css from bootstrap. I believe you also need the javascript. You may want to add the these scripts:

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

Upvotes: 1

Related Questions