<div class="container mt-3 mb-5">
<div class="row">
<div class="col">
<!--Carousel Wrapper-->
<div class="carousel slide carousel-multi-item" data-ride="carousel" id="multi-item-example">
<!--Controls-->
<div class="controls-top float-right">
<a class="btn btn-outline-secondary prev" data-slide="prev" href="#multi-item-example"><i class="fa fa-chevron-left"></i></a> <a class="btn btn-outline-secondary next" data-slide="next" href="#multi-item-example"><i class="fa fa-chevron-right"></i></a>
</div><!--/.Controls-->
<h3 class="d-inline-block mb-3">Card Carousel</h3><!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div><!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div><!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div><!--/.Third slide-->
</div><!--/.Slides-->
<!--Indicators-->
<ol class="carousel-indicators carousel-indicators1">
<li class="active" data-slide-to="0" data-target="#multi-item-example"></li>
<li data-slide-to="1" data-target="#multi-item-example"></li>
<li data-slide-to="2" data-target="#multi-item-example"></li>
</ol><!--/.Indicators-->
</div><!--/.Carousel Wrapper-->
</div>
</div>
</div>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col">
<!--Carousel Wrapper-->
<div class="carousel slide carousel-multi-item" data-ride="carousel" id="multi-item-example1">
<h3 class="d-inline-block mb-3">Card Carousel Images Only</h3><!--Controls-->
<div class="controls-bottom pull-right">
<a class="btn btn-outline-secondary prev" data-slide="prev" href="#multi-item-example1"><i class="fa fa-chevron-left"></i></a> <a class="btn btn-outline-secondary next" data-slide="next" href="#multi-item-example1"><i class="fa fa-chevron-right"></i></a>
</div><!--/.Controls-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-3">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"></div>
</div>
</div>
</div><!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"></div>
</div>
</div>
</div><!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"></div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card"><img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"></div>
</div>
</div>
</div><!--/.Third slide-->
</div><!--/.Slides-->
<!--Indicators-->
<ol class="carousel-indicators carousel-indicators1 mt-4">
<li class="active" data-slide-to="0" data-target="#multi-item-example1"></li>
<li data-slide-to="1" data-target="#multi-item-example1"></li>
<li data-slide-to="2" data-target="#multi-item-example1"></li>
</ol><!--/.Indicators-->
</div><!--/.Carousel Wrapper-->
</div>
</div>
</div>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col">
<!--Carousel Wrapper-->
<div class="carousel slide carousel-multi-item" data-ride="carousel" id="multi-item-example2">
<h3 class="d-inline-block mb-3">Card Carousel Images with Titles</h3><!--Controls-->
<div class="controls-bottom pull-right">
<a class="btn btn-outline-secondary prev" data-slide="prev" href="#multi-item-example2"><i class="fa fa-chevron-left"></i></a> <a class="btn btn-outline-secondary next" data-slide="next" href="#multi-item-example2"><i class="fa fa-chevron-right"></i></a>
</div><!--/.Controls-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-3">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
</div>
</div><!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
</div>
</div><!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
</div>
</div><!--/.Third slide-->
</div><!--/.Slides-->
<!--Indicators-->
<ol class="carousel-indicators carousel-indicators1 mt-4">
<li class="active" data-slide-to="0" data-target="#multi-item-example2"></li>
<li data-slide-to="1" data-target="#multi-item-example2"></li>
<li data-slide-to="2" data-target="#multi-item-example2"></li>
</ol><!--/.Indicators-->
</div><!--/.Carousel Wrapper-->
</div>
</div>
</div>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col">
<!--Carousel Wrapper-->
<div class="carousel slide carousel-multi" data-ride="carousel" id="multi-item-example3">
<h3 class="d-inline-block mb-3">Card Carousel Images</h3><!--Controls-->
<div class="controls-bottom pull-right">
<a class="btn btn-outline-secondary prev" data-slide="prev" href="#multi-item-example3"><i class="fa fa-chevron-left"></i></a> <a class="btn btn-outline-secondary next" data-slide="next" href="#multi-item-example3"><i class="fa fa-chevron-right"></i></a>
</div><!--/.Controls-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-3">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
</div>
</div><!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
</div>
</div><!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
<div class="col-md-3 clearfix d-none d-md-block">
<div class="card">
<img alt="Card image cap" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg">
<div class="card-body">
<div class="card-title">
Card Title
</div>
</div>
</div>
</div>
</div>
</div><!--/.Third slide-->
</div><!--/.Slides-->
<!--Indicators-->
<ol class="carousel-indicators carousel-indicators1 mt-4">
<li class="active" data-slide-to="0" data-target="#multi-item-example3"></li>
<li data-slide-to="1" data-target="#multi-item-example3"></li>
<li data-slide-to="2" data-target="#multi-item-example3"></li>
</ol><!--/.Indicators-->
</div><!--/.Carousel Wrapper-->
</div>
</div>
</div>
body {
font-family: 'Open Sans', sans-serif;
}
.carousel-indicators1 {
right: 0;
bottom: -30px;
li {
// background-color: red;
outline: 1px solid lightgray;
}
.active {
// background-color: blue;
outline: 1px solid black;
}
}
img {
height: 200px;
}
View Compiled
$('.carousel.carousel-multi .carousel-item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});