My objective is to reposition the indicators below the slider image by setting the .carousel-indicators with a bottom: -50px; property. However, when I implement this, the indicators simply disappear. I suspect that this issue is related to the overflow:hidden attribute of the slider, but I haven't been able to resolve it.
Below is the code I am working with:
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
<li data-target="#slider" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="header.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider2.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider3.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider4.jpeg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider5.jpeg">
</div>
</div>
</div>
Here is the CSS code:
#slider {
height: 350px;
overflow: hidden;
width: 100%;
}
.carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators {
bottom: -50px;
}