I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm unsure of what is missing in my code.
Here is a link to an example of my code on CodePen.
Below is the HTML code for quick reference:
<div class="container">
<div id="casesCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="row">
<div class="col-md-4">
<div class="carousel-item active">
<div class="card card-body">
<h1>0</h1>
</div>
</div>
</div>
<div class="col-md-4">
<div class="carousel-item active">
<div class="card card-body">
<h1>1</h1>
</div>
</div>
</div>
<div class="col-md-4">
<div class="carousel-item active">
<div class="card card-body">
<h1>2</h1>
</div>
</div>
</div>
<!-- Additional items omitted for brevity -->
</div>
</div>
<a class="carousel-control-prev" href="#casesCarousel" 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="#casesCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>