Product Carousel bootstrap Free Download

How To Create Bootstrap Responsive Product Slider
How To Create Bootstrap Responsive Product Slider
How To Create Bootstrap Responsive Product Slider

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

Leave a Reply

avatar
  Subscribe  
Notify of