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.
<!---css to make the arrows larger--->
<style type="text/css">.carousel-control-next-icon, .carousel-control-prev-icon {
width: 40px;
height: 40px;
}
.carousel-control-next, .carousel-control-prev {
opacity: 1;
}
</style>
<!---css to make the arrows larger--->
<div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
<div class="carousel-inner">
<div class="carousel-item active"><img alt="First slide" class="d-block w-100" src="/files/content/img/W.jpg" /></div>
<div class="carousel-item"><img alt="Second slide" class="d-block w-100" src="/files/content/img/W-gold.jpg" /></div>
<div class="carousel-item"><img alt="Third slide" class="d-block w-100" src="/files/content/img/W-metaliic-gold.jpg" /></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a></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>