I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and CSS codes provided along with a screenshot for clarity.
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;
}