Carousel
eCommerce carousel
Carousel component designed for eCommerce projects.
Carousel basic example
-crop.jpg)
-crop.jpg)
-crop.jpg)
<!--Section: Block Content-->
<section>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.jpg"
alt="First slide">
<a href="#!">
<div class="mask rgba-black-light"></div>
</a>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First shop item</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/clothes(4)-crop.jpg"
alt="Second slide">
<a href="#!">
<div class="mask rgba-black-light"></div>
</a>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Second shop item</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/clothes(3)-crop.jpg"
alt="Third slide">
<a href="#!">
<div class="mask rgba-black-light"></div>
</a>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Third shop item</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" 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="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/Controls-->
</div>
<!--/Carousel Wrapper-->
</section>
<!--Section: Block Content-->
Multi-item carousel
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.
Fantasy T-shirt
Shirts
$12.99
Sold out
Fantasy T-shirt
Shirts
$12.99
Sale
Fantasy T-shirt
Shirts
$12.99
$36.99
Fantasy T-shirt
Shirts
$12.99
Sold out
Fantasy T-shirt
Shirts
$12.99
Sale
Fantasy T-shirt
Shirts
$12.99
$36.99
Fantasy T-shirt
Shirts
$12.99
Sold out
Fantasy T-shirt
Shirts
$12.99
Sale
Fantasy T-shirt
Shirts
$12.99
$36.99
<!--Section: Block Content-->
<section class="text-center mb-5">
<!-- Section heading -->
<h3 class="text-center font-weight-bold mb-4">Why is it so great?</h3>
<!-- Section description -->
<p class="text-center w-sm-75 mx-auto mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad
minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.</p>
<!-- Carousel Wrapper -->
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-target="#multi-item-example" data-slide-to="0"></li>
<li class="" data-target="#multi-item-example" data-slide-to="1"></li>
<li class="" data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!-- Indicators -->
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="carousel-item active">
<div class="wrapper">
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3"><span>$12.99</span></h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">
<i class="fas fa-shopping-cart pr-2"></i>Add to cart
</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-dark badge-pill badge-news">Sold out</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3"><span>$12.99</span></h6>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3">
<span class="text-danger mr-1">$12.99</span>
<span class="text-grey"><s>$36.99</s></span>
</h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">
<i class="fas fa-shopping-cart pr-2"></i>Add to cart
</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<!-- First slide -->
<!-- Second slide -->
<div class="carousel-item">
<div class="wrapper">
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.jpg" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3"><span>$12.99</span></h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">
<i class="fas fa-shopping-cart pr-2"></i>Add to cart
</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-dark badge-pill badge-news">Sold out</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3"><span>$12.99</span></h6>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3">
<span class="text-danger mr-1">$12.99</span>
<span class="text-grey"><s>$36.99</s></span>
</h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">
<i class="fas fa-shopping-cart pr-2"></i>Add to cart
</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<!-- Second slide -->
<!--Third slide -->
<div class="carousel-item">
<div class="wrapper">
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3"><span>$12.99</span></h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">
<i class="fas fa-shopping-cart pr-2"></i>Add to cart
</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-dark badge-pill badge-news">Sold out</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3"><span>$12.99</span></h6>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
<div class="col-md-4 mb-4">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="pt-4">
<h5>Fantasy T-shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3">
<span class="text-danger mr-1">$12.99</span>
<span class="text-grey"><s>$36.99</s></span>
</h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">
<i class="fas fa-shopping-cart pr-2"></i>Add to cart
</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<!--Third slide -->
</div>
<!-- Slides -->
<a class="carousel-control-prev left carousel-control" data-slide="prev" href="#multi-item-example" role="button"
data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next right carousel-control" data-slide="next" href="#multi-item-example" role="button"
data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span></a>
</div>
<!-- Carousel Wrapper -->
</section>
<!--Section: Block Content-->
Questions or feedback?
Let us know