<div class="container-fluid">
<section>
<div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2 product-carousel" data-ride="carousel">
<!--Controls-->
<div class="controls-top my-3">
<a class="btn-floating btn-sm" href="#carousel-example-multi" data-slide="prev"><i class="fas fa-chevron-left"></i></a>
<a class="btn-floating btn-sm" href="#carousel-example-multi" data-slide="next"><i class="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>
<li data-target="#carousel-example-multi" data-slide-to="6"></li>
<li data-target="#carousel-example-multi" data-slide-to="7"></li>
<li data-target="#carousel-example-multi" data-slide-to="8"></li>
</ol>
<!--/.Indicators-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active mx-auto">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(4).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Moda</h5>
<p class="aqua-sky-text mb-0">Plan B</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star-half-alt mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">9,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(1).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Indie City</h5>
<p class="aqua-sky-text mb-0">Pixies</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="far fa-star mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">14,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(7).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Year</h5>
<p class="aqua-sky-text mb-0">Indielectru</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">12,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(8).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">L'Hiver Indien</h5>
<p class="aqua-sky-text mb-0">Baloji</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star-half-alt mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">10,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(6).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Indie Funk</h5>
<p class="aqua-sky-text mb-0">Generation Funk</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">19,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(2).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Rockferry</h5>
<p class="aqua-sky-text mb-0">Duffy</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star-half-alt mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">17,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(3).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Female Indie Pop</h5>
<p class="aqua-sky-text mb-0">Various artists</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="far fa-star mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">9,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(5).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Rock 'N' Roll</h5>
<p class="aqua-sky-text mb-0">Chuck Berry</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star-half-alt mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">29,99 $</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-md-4 col-lg-2 mx-auto">
<div class="card mb-2">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(9).jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">High Voltage</h5>
<p class="aqua-sky-text mb-0">AC/DC</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">24,99 $</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
.carousel-multi-item.v-2.product-carousel .carousel-inner .carousel-item.active,
.carousel-multi-item.v-2.product-carousel .carousel-item-next,
.carousel-multi-item.v-2.product-carousel .carousel-item-prev {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.carousel-multi-item.v-2.product-carousel .carousel-item-right.active,
.carousel-multi-item.v-2.product-carousel .carousel-item-next {
-webkit-transform: translateX(20%);
-ms-transform: translateX(20%);
transform: translateX(20%); }
.carousel-multi-item.v-2.product-carousel .carousel-item-left.active,
.carousel-multi-item.v-2.product-carousel .carousel-item-prev {
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%); }
.carousel-multi-item.v-2.product-carousel .carousel-item-right,
.carousel-multi-item.v-2.product-carousel .carousel-item-left {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0); }
.carousel-multi-item.v-2.product-carousel *, .carousel-multi-item.v-2.product-carousel ::after, .carousel-multi-item.v-2.product-carousel ::before {
-webkit-box-sizing: content-box;
box-sizing: content-box; }
.fuchsia-rose-text {
color: #db0075;
}
.aqua-sky-text {
color: #5cc6c3;
}
.mimosa-text {
color: #F0C05A;
}
.list-inline-item .fas, .list-inline-item .far {
font-size: .8rem;
}
.chili-pepper-text {
color: #9B1B30;
}
.carousel-multi-item .controls-top .btn-floating {
background: #F8CDCD;
}
.carousel-multi-item .carousel-indicators li {
height: .75rem;
width: .75rem;
max-width: .75rem;
background-color: #5cc6c3;
}
.carousel-multi-item .carousel-indicators .active {
height: 1rem;
width: 1rem;
max-width: 1rem;
background-color: #5cc6c3;
}
.carousel-multi-item .carousel-indicators {
margin-bottom: -1rem;
}
$('.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<3;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});