My Bootstrap carousel are not giving the slides - html

Question

I copied a Bootstrap carousel code to understand how it works but the code isn't giving me the desired result. The slides aren't moving.The first slide is just stagnant. Please what do you reccommend I do? Here are the html and css codes. I also included a screenshot of it for more clarification.
html
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="..." class="d-block w-100" alt="First slide">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="..." class="d-block w-100" alt="Second slide">
</div>
<div class="carousel-item" style="background-color: purple;">
<img src="..." class="d-block w-100" alt="Third slide">
</div>
</div>
</div>
css
.carousel-item {
height: 500px;
}

Answer 1

You need to have the proper parent with the appropriate id and data-ride that correlates with Bootstrap. Then you need to add the relative JS and CSS for Bootstrap 4.
.carousel-item {
height: 500px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="..." class="d-block w-100" alt="First slide">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="..." class="d-block w-100" alt="Second slide">
</div>
<div class="carousel-item" style="background-color: purple;">
<img src="..." class="d-block w-100" alt="Third slide">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Answer 2

Add this code inside "head" tag of your .html file.
Why do you need to add this? The answer is whenever you are using a 3rd party library either you need to install it in your project or use its CDN to make it work.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>