

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; }