CODEWITHSUNDEEP
htmltwitter-bootstrapcarousel
CosmicCQC
CosmicCQC

Reputation: 33

How to fix bootstrap carousel?

The bootstrap carousel is not functioning properly. It just displays one image but it is not changing.

The code for carousel was copy and pasted directly from bootstrap's documentation and I just changed the image.

<!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/[email protected]/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    </body>
</html>

Upvotes: 2

Views: 83

Answers (1)

Fried noodles
Fried noodles

Reputation: 125

Your bootstrap styles import seems to be wrong, replace it with 

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

and replace your script codes with the following:

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

and it should do the trick!
You can refer to https://getbootstrap.com/docs/4.0/getting-started/introduction/

Upvotes: 1

Related Questions