I am encountering an issue with my simple bootstrap carousel on my HTML page. The controls do not seem to be functioning properly and the indicators are not appearing.
edit: After reviewing the documentation, I followed the instructions provided but the problem persists.
Here is a snippet of the code:
.gallery-carousel
{
position: relative;
top: 8vh;
height: 60vh;
width: 90%;
left: 5%;
overflow: hidden;
}
.carousel-inner,
.carousel-item
{
width: 100%;
height: 100%;
}
.carousel-item img
{
width: 100%;
height: 100%;
background-size: cover;
} <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbd4cbd5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2c2d9ded9dfccdded98839c839d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!--Carousel-->
<div id="carouselExampleControls" class="carousel slide gallery-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" style="background-image: url('https://farm5.staticflickr.com/4528/38249721602_1dfb84e8a9_b.jpg')">
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-image: url('https://farm5.staticflickr.com/4524/37570788654_c315f9d0b0_b.jpg')">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" data-target="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" data-target="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>I have searched for solutions elsewhere, but none have resolved the issue for me.