Bootstrap Carousel previous and next buttons aren't working

Question

I'm trying to create a carousel, after watching tutorials and looking through the HTML on bootstrap I thought I had done everything correctly but when I press the next button nothing happens.

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Test</title>
    </head>
    <body>
        <div id="mycarousel" class="carousel slide" data-ride="carousel">
            <!-- indicators dot nav -->

            <!-- wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="cat photo.jpeg" alt="cat">
                </div>
                <div class="item">
                    <img class="d-block w-100" src="dog photo.jpg" alt="dog">
                </div>
            </div>

            <!-- controls or next and prev buttons -->
            <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
    </body>
</html>

Answer 1

You are not giving carousel-item class to second slide of carousel, change your code to this and it'll work

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Test</title>
    </head>
    <body>
        <div id="mycarousel" class="carousel slide" data-ride="carousel">
            <!-- indicators dot nav -->

            <!-- wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" alt="cat">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://www.freedigitalphotos.net/images/img/homepage/394230.jpg" alt="dog">
                </div>
            </div>

            <!-- controls or next and prev buttons -->
            <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
    </body>
</html>

Bootstrap Carousel previous and next buttons aren't working

Question

1 answers

solution1
0 ACCPTED 2020-08-25 06:40:10

Bootstrap Carousel previous and next buttons aren't working

Question

1 answers

solution1 0 ACCPTED 2020-08-25 06:40:10

solution1
0 ACCPTED 2020-08-25 06:40:10