I am attempting to incorporate two features into a Bootstrap 4 carousel:
1- Add shadow to the text on top of the image in the carousel-caption
2- Display indicators in circular format with numbers inside them
I would like the final result to resemble this image: https://i.sstatic.net/SAfg5.png
This is what I have tried so far:
<script>
/* shadow */
.carousel-caption {
background: rgba(0,0,0,0.5);
background-color: rgba(0,0,0,.5);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
/* circle indicators and numbers */
.carousel-indicators-numbers {
li {
text-indent: 0;
margin: 0 2px;
width: 30px;
height: 30px;
border: none;
border-radius: 100%;
line-height: 30px;
color: #fff;
background-color: #999;
transition: all 0.25s ease;
&.active, &:hover {
margin: 0 2px;
width: 30px;
height: 30px;
background-color: #337ab7;
}
}
}
</script>
<!-- carousel NEWS -->
<div class="col-md-9" style="height:550px; width: 900px;">
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- indicators dot nov -->
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
<li data-target="#carousel-example-generic" data-slide-to="1">2</li>
<li data-target="#carousel-example-generic" data-slide-to="2">3</li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
<div class="carousel-caption">
<a href="#"><h3>News 1</h3></a>
<p>Bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
<div class="carousel-caption">
<a href="#"><h3>News 2</h3></a>
<p>Bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
<div class="carousel-caption">
<a href="#"><h3>News 3</h3></a>
<p>Bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
</div>
</div>
<!-- controls or next and prev buttons -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Unfortunately, my attempts did not yield the desired effect and only show the default Bootstrap carousel layout: https://i.sstatic.net/RxWzS.png