<div class="container">
<div class="row">
<div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2" data-ride="carousel">
<div class="controls-top">
<a class="btn-floating" href="#carousel-example-multi" data-slide="prev">
<i class="fas fa-chevron-left"></i>
</a>
<a class="btn-floating" href="#carousel-example-multi" data-slide="next">
<iclass="fas fa-chevron-right"> </i>
</a>
</div>
<!--/.Controls-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-multi" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-multi" data-slide-to="1"></li>
<li data-target="#carousel-example-multi" data-slide-to="2"></li>
<li data-target="#carousel-example-multi" data-slide-to="3"></li>
<li data-target="#carousel-example-multi" data-slide-to="4"></li>
<li data-target="#carousel-example-multi" data-slide-to="5"></li>
</ol>
<!--/.Indicators-->
<div class="carousel-inner v-2" role="listbox">
<div class="carousel-item active">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title font-weight-bold">Ảnh 1 Activư</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>
<a class="btn btn-primary btn-md btn-rounded">Button</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (34).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title font-weight-bold">Ảnh 2 đầu</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>
<a class="btn btn-primary btn-md btn-rounded">Button</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (38).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title font-weight-bold">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>
<a class="btn btn-primary btn-md btn-rounded">Button</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (29).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title font-weight-bold">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>
<a class="btn btn-primary btn-md btn-rounded">Button</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (30).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title font-weight-bold">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>
<a class="btn btn-primary btn-md btn-rounded">Button</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/img (27).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title font-weight-bold">
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>
<a class="btn btn-primary btn-md btn-rounded">
Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.carousel.carousel-multi-item.v-2 .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<4;i++) {
next=next.next();
if (!next.length) {
next=$(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
$('.carousel').carousel({
interval: 2000
})
</script>
<style type="text/css">
.carousel-multi-item{
margin-bottom:5rem
}
.carousel-multi-item .carousel-inner .carousel-item.active,.carousel-multi-item .carousel-item-next,.carousel-multi-item .carousel-item-prev{display:block}.carousel-multi-item .carousel-inner.v-2 .carousel-item-next,.carousel-multi-item .carousel-inner.v-2 .carousel-item-prev,.carousel-multi-item .carousel-inner.v-2 .carousel-item.active{
display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex
}
.carousel-multi-item .carousel-inner.v-2 .carousel-item-next,.carousel-multi-item .carousel-inner.v-2 .carousel-item-right.active{
-webkit-transform:translateX(16%);
-ms-transform:translateX(16%);
transform:translateX(16%)
}
.carousel-multi-item .carousel-inner.v-2 .carousel-item-left.active,.carousel-multi-item .carousel-inner.v-2 .carousel-item-prev{
-webkit-transform:translateX(-16%);
-ms-transform:translateX(-16%);
transform:translateX(-16%)}
.carousel-multi-item .carousel-inner.v-2 .carousel-item-left,.carousel-multi-item .carousel-inner.v-2 .carousel-item-right{
-webkit-transform:translateX(0);
-ms-transform:translateX(0);transform:translateX(0)
}
.carousel-multi-item .carousel-indicators li{
height:1.25rem;
width:1.25rem;
max-width:1.25rem;
background-color:#4285f4;
margin-bottom:-3.75rem
}
.carousel-multi-item .carousel-indicators .active{
height:1.56rem;
width:1.56rem;
max-width:1.56rem;
background-color:#4285f4;
-webkit-border-radius:50%;
border-radius:50%
}
.carousel-multi-item .controls-top{
text-align:center;margin-bottom:1.88rem
}
.carousel-multi-item .controls-top .btn-floating{
background:#4285f4
}
.carousel-multi-item .carousel-indicators{
margin-bottom:-2em
}
.carousel-multi-item .card-cascade.narrower{
margin-top:1.25rem;margin-bottom:.3rem}
@media (min-width:768px){
.carousel-multi-item .col-md-4{
float:left;width:
33.333333%;
max-width:100%
}
}
@media only screen and (max-width:992px){
.carousel-multi-item .carousel-indicators li{
margin-bottom:-1.88rem
}
}
.carousel-thumbnails .carousel-indicators{
white-space:nowrap;overflow-x:auto;position:static;left:initial;width:initial;
margin-left:initial;margin-right:initial
}.carousel-thumbnails .carousel-indicators>li{
width:initial;height:initial;text-indent:initial
}
.carousel-thumbnails .carousel-indicators>li .active img{opacity:1}
.wrapper-carousel-fix .carousel-fade .active.carousel-item-left,.wrapper-carousel-fix .carousel-fade .active.carousel-item-right{
-webkit-transition:-webkit-transform .6s ease;
transition:-webkit-transform .6s ease;
-o-transition:transform .6s ease;transition:transform .6s ease;
transition:transform .6s ease,-webkit-transform .6s ease;
-webkit-transition-property:opacity;-o-transition-property:opacity;
transition-property:opacity
}
</style>
Nguồn: https://mdbootstrap.com/docs/jquery/javascript/carousel/