CODEWITHSUNDEEP
htmlbootstrap-4
otc09
otc09

Reputation: 89

Bootstrap Carousel not switching through images

I'm currently trying to make a carousel of 2 images and I have all the components- arrows, indicator, first image, but when I click the arrows, nothing happens.

I have absolutely no idea what to do as I was just following a tutorial and everything looks all right.

<div id="run-images" class="carousel slide carousel-fade" data-ride="carousel">

    <ul class="carousel-indicators">
        <li data-target="run-images" data-slide-to="0" class="active"></li>
        <li data-target="run-images" data-slide-to="1"></li>
    </ul>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="Greens%20View.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="clarks.jpg" class="d-block w-100">
        </div>

    </div>
    <a class="carousel-control-prev" href="#run-images" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#run-images" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>

I want the carousel to cycle through the images but when the arrow is clicked, nothing happens. Thanks!

Upvotes: 0

Views: 47

Answers (2)

davidev
davidev

Reputation: 8537

carousel-fade was added in Bootstrap version 4.0 or higher.

Make sure to have the newest files included and the bootstrap js and css match the version number.

Edit: Your code is totally correct. I tried a jsfiddle and used version 4.1.3 of Bootstrap and it worked.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Upvotes: 1

Lucas Arbex
Lucas Arbex

Reputation: 909

Seems like everything is fine, but don't forget to add jQuery and Bootstrap.js to your code before closing <body> tag, and also check if the Bootstrap version of the tutorial is exact the same as the one you are using.

For further information, please check this link.

Upvotes: 0

Related Questions