A carousel is a slideshow that cycles through images. It can also be used to display contents that span multiple slides.
Standard carousel
Code
Adjust/delete the css as needed.
<style>
.carousel-control-prev-icon,
.carousel-control-next-icon {
font-size: 0;
width: 1.5rem;
height: 1.5rem;
position: relative;
}
.carousel-control-prev-icon:after,
.carousel-control-next-icon:after {
content: '';
position: absolute;
top: -12px;
left: -15px;
display: block;
width: 50px;
height: 50px;
background-color: #4b2e84;
border-radius: 50%;
z-index: -1;
}
.carousel-control-prev-icon:after {
left: -11px;
}
.carousel-control-prev,
.carousel-control-next {
opacity: 0.75;
width: 12%;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
opacity: 1;
}
.carousel-control-prev:hover .carousel-control-prev-icon:after,
.carousel-control-next:hover .carousel-control-next-icon:after {
opacity: 1;
background-color: #b7a57a;
}
@media screen and (max-width: 580px) {
.carousel-control-prev,
.carousel-control-next {
width: 15%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 1.25rem;
}
.carousel-control-prev-icon:after,
.carousel-control-next-icon:after {
width: 40px;
height: 40px;
left: -11px;
top: -8px;
}
.carousel-control-prev-icon:after {
left: -9px;
}
}
</style>
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img alt="First slide" class="d-block w-100" src="https://www.engr.washington.edu/files/content/img/W.jpg" /></div>
<div class="carousel-item"><img alt="Second slide" class="d-block w-100" src="https://www.engr.washington.edu/files/content/img/W-gold.jpg" /></div>
<div class="carousel-item"><img alt="Third slide" class="d-block w-100" src="https://www.engr.washington.edu/files/content/img/W-metaliic-gold.jpg" /></div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Multi-carousel
Standard version
Code
<style type="text/css">
#multi-item-carousel .carousel-indicators {
bottom:-50px;
}
#multi-item-carousel .carousel-inner {
margin-bottom:50px;
}
#multi-item-carousel .carousel-indicators li {
background-color: #4b2d83;
background-color: rgba(70, 70, 70, 0.25);
}
#multi-item-carousel .carousel-indicators.active {
background-color: #4b2d83;
}
#multi-item-carousel .carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
#multi-item-carousel a.carousel_control {
color: #4b2d83;
}
#multi-item-carousel a.carousel_control:hover {
color: #b7a57a;
}
</style>
<div class="carousel slide carousel-multi-item carousel-fade" data-interval="false" data-ride="carousel" id="multi-item-carousel">
<!--Controls-->
<div class="text-center mb-2">
<a class="carousel_control" href="#multi-item-carousel" data-slide="prev"><i class="fa fa-chevron-circle-left fa-2x"> </i></a>
<a class="carousel_control" href="#multi-item-carousel" data-slide="next"><i class="fa fa-chevron-circle-right fa-2x"> </i></a>
</div>
<!--/.Controls--><!--Indicators-->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#multi-item-carousel"> </li>
<li data-slide-to="1" data-target="#multi-item-carousel"> </li>
</ol>
<!--/.Indicators--><!--Slides-->
<div class="carousel-inner">
<!--First slide-->
<div class="carousel-item active">
<div class="card-deck">
<div class="card mb-2">
<div class="card-header">
<h3 class="m-2">Card header</h3>
</div>
<div class="card-body p-4">
<p>Text goes here</p>
</div>
</div>
<div class="card mb-2">
<div class="card-header">
<h3 class="m-2">Card header</h3>
</div>
<div class="card-body">
<p>Text goes here</p>
</div>
</div>
<div class="card mb-2">
<div class="card-header">
<h3 class="m-2">Card header</h3>
</div>
<div class="card-body">
<p>Text goes here</p>
</div>
</div>
</div>
</div>
<!--/.First slide--><!--Second slide-->
<div class="carousel-item">
<div class="card-deck">
<div class="card mb-2">
<div class="card-header">
<h3 class="m-2">Card header</h3>
</div>
<div class="card-body p-4">
<p>Text goes here</p>
</div>
</div>
<div class="card mb-2">
<div class="card-header">
<h3 class="m-2">Card header</h3>
</div>
<div class="card-body">
<p>Text goes here</p>
</div>
</div>
<div class="card mb-2">
<div class="card-header">
<h3 class="m-2">Card header</h3>
</div>
<div class="card-body">
<p>Text goes here</p>
</div>
</div>
</div>
</div>
<!--/.Second Slides-->
</div>
<!--/.Slides-->
</div>
Story and Layout content type version
Code
<style type="text/css">
#multi-item-carousel .carousel-indicators {
bottom:-50px;
}
#multi-item-carousel .carousel-inner {
margin-bottom:50px;
}
#multi-item-carousel .carousel-indicators li {
background-color: #4b2d83;
background-color: rgba(70, 70, 70, 0.25);
}
#multi-item-carousel .carousel-indicators.active {
background-color: #4b2d83;
}
#multi-item-carousel .carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
#multi-item-carousel a.carousel_control {
color: #4b2d83;
}
#multi-item-carousel a.carousel_control:hover {
color: #b7a57a;
}
</style>
<div class="p-lg-5 mb-0" style="background-color: #ECE9E2">
<div class="container my-lg-5 py-lg-4 m-auto">
<!----Optional headline------>
<h2 class="mb-5 text-align-center">Headline</h2>
<!----end headline------>
<div class="carousel slide carousel-multi-item carousel-fade" data-interval="false" data-ride="carousel" id="multi-item-carousel">
<!--Controls-->
<div class="text-center mb-2">
<a class="carousel_control" href="#multi-item-carousel" data-slide="prev"><i class="fa fa-chevron-circle-left fa-2x"> </i></a>
<a class="carousel_control" href="#multi-item-carousel" data-slide="next"><i class="fa fa-chevron-circle-right fa-2x"> </i></a>
</div>
<!--/.Controls--><!--Indicators-->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#multi-item-carousel"> </li>
<li data-slide-to="1" data-target="#multi-item-carousel"> </li>
</ol>
<!--/.Indicators--><!--Slides-->
<div class="carousel-inner">
<!--First slide-->
<div class="carousel-item active">
<div class="card-deck py-3">
<div class="card">
<img loading="lazy" alt="#" class="card-img-top" src="img.jpg" width="358" width="229">
<div class="card-body bg-white p-4">
<p class="small text-dark font-weight-bold text-uppercase">Tag goes here</p>
<h2 class="mt-2 card-title h3">Headline goes here</h2>
<p class="card-text">Body text goes here.</p>
<p><a class="btn btn-default mt-3" href="#">Go someewhere</a></p>
</div>
</div>
<div class="card">
<img loading="lazy" alt="#" class="card-img-top" src="img.jpg" width="358" width="229">
<div class="card-body bg-white p-4">
<p class="small text-dark font-weight-bold text-uppercase">Tag goes here</p>
<h2 class="mt-2 card-title h3">Headline goes here</h2>
<p class="card-text">Body text goes here.</p>
<p><a class="btn btn-default mt-3" href="#">Go someewhere</a></p>
</div>
</div>
<div class="card">
<img loading="lazy" alt="#" class="card-img-top" src="img.jpg" width="358" width="229">
<div class="card-body bg-white p-4">
<p class="small text-dark font-weight-bold text-uppercase">Tag goes here</p>
<h2 class="mt-2 card-title h3">Headline goes here</h2>
<p class="card-text">Body text goes here.</p>
<p><a class="btn btn-default mt-3" href="#">Go someewhere</a></p>
</div>
</div>
</div>
</div>
<!--/.First slide--><!--Second slide-->
<div class="carousel-item">
<div class="card-deck py-3">
<div class="card">
<img loading="lazy" alt="#" class="card-img-top" src="img.jpg" width="358" width="229">
<div class="card-body bg-white p-4">
<p class="small text-dark font-weight-bold text-uppercase">Tag goes here</p>
<h2 class="mt-2 card-title h3">Headline goes here</h2>
<p class="card-text">Body text goes here.</p>
<p><a class="btn btn-default mt-3" href="#">Go someewhere</a></p>
</div>
</div>
<div class="card">
<img loading="lazy" alt="#" class="card-img-top" src="img.jpg" width="358" width="229">
<div class="card-body bg-white p-4">
<p class="small text-dark font-weight-bold text-uppercase">Tag goes here</p>
<h2 class="mt-2 card-title h3">Headline goes here</h2>
<p class="card-text">Body text goes here.</p>
<p><a class="btn btn-default mt-3" href="#">Go someewhere</a></p>
</div>
</div>
<div class="card">
<img loading="lazy" alt="#" class="card-img-top" src="img.jpg" width="358" width="229">
<div class="card-body bg-white p-4">
<p class="small text-dark font-weight-bold text-uppercase">Tag goes here</p>
<h2 class="mt-2 card-title h3">Headline goes here</h2>
<p class="card-text">Body text goes here.</p>
<p><a class="btn btn-default mt-3" href="#">Go someewhere</a></p>
</div>
</div>
</div>
</div>
<!--/.Second Slides-->
</div>
<!--/.Slides-->
</div>
</div>
</div>