Today in this article we will learn how to create Bootstrap Responsive Product Carousel Template, here i will provide complete source code of bootstrap product slider.
HTML
<div class="schauhan-product-slider pd20">
<div class="container ">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<!-- These 4 Are Active Items Show on Page-->
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/1.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes </a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(4,585 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 495.00 (17% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/2.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(245 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 99.00 (21% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/3.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(345 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 999.00 (33% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/4.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(45 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 199.00 (37% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- From Here These Are Scrrolable items-->
<div class="item">
<div class="row">
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/5.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(2,125 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 49.00 (40% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/6.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(5 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 9.00 <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/1.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(215 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 39.00 (15% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<!--Start Product -->
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/2.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i>
<a href="#">(10,345 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 11,999.00 (37% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<!--End Product -->
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/3.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(945 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 299.00 (54% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/4.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(15 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 5.00 (11% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/5.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes </a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(745 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 19.00 (63% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="schauhan-product-item">
<div class="schauhan-product-photo">
<a href="#"><img src="images/6.jpeg" class="img-responsive" alt="a" /></a>
</div>
<div class="schauhan-product-info">
<div class="schauhan-product-title">
<h4><a href="#">Nike Shoes</a></h4></div>
<div class="schauhan-product-rating">
<i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="active glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i>
<a href="#">(145 ratings)</a>
</div>
<div class="schauhan-hline"></div>
<div class="schauhan-product-price">
$ 129.00 (29% off) <input name="" type="button" class="btn btn-default mybt pull-right" value="BuyNow">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>CSS
.pd20
{
padding:20px;
}
.schauhan-product-item
{
background:#fff;
-webkit-box-shadow: 0px 0px 24px 0px rgba(240,237,240,1);
-moz-box-shadow: 0px 0px 24px 0px rgba(240,237,240,1);
box-shadow: 0px 0px 24px 0px rgba(240,237,240,1);
}
.schauhan-product-slider {
background: #fff;
padding: 100px;
}
.schauhan-product-slider .carousel-control {
width: 5%;
background:none;
}
.schauhan-product-slider .carousel-control .glyphicon {
color:#000;
}
.schauhan-product-item a {
color: #333;
}
.schauhan-product-item a:hover {
text-decoration: none;
}
.schauhan-product-item .schauhan-hline {
margin: 10px 0;
height: 1px;
background: #ccc;
}
@media all and (max-width: 768px) {
.schauhan-product-item {
margin-bottom: 30px;
}
.pd20
{
padding:20px;
}
.schauhan-product-title h4 a
{
color:#333;
}
}
.schauhan-product-photo {
text-align: center;
height: 120px;
padding:15px;
background: #fff;
}
.schauhan-product-photo img {
height: 100%;
width:60%;
display: inline-block;
}
.schauhan-product-info {
background: #fff;
padding: 15px;
}
.schauhan-product-title h4 a
{
color:#333;
}
.schauhan-product-title h4 {
margin-top: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.schauhan-product-rating, .schauhan-product-rating a {
color: #333;
font-size:12px;
}
.schauhan-product-rating .active {
color: #FFB500;
}
.schauhan-product-price {
color:#fe4646;
font-size: 14px;
}
.mybt
{
padding:5px;
font-size:12px;
background:#529cff;
border:none;
color:#fff;
}
