<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--start productslider--> <section class="productslider"> <div class="container text-center"> <div class="row"> <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" style="padding: 5px;"> <div class="whitecolor"> <h4 style="margin-top: 80px;">YOU MAY<br> LIKE</h4> <button type="button" class="addcart" style="margin-top: 80px;">ADD TO CART</button> </div><!--whitecolor--> </div><!--col--> <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12" style="padding: 5px;" > <div class="carousel slide " id="media"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider1.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider2.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider3.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider4.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> </div><!--row--> </div><!--item--> <div class="item"> <div class="row"> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider5.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider6.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider7.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider8.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> </div><!--row--> </div><!--item--> <div class="item"> <div class="row"> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider9.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider12.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider11.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> <div class="col-lg-3 col-md-3" style="padding: 0; margin: 0;"> <div class="thumbnail"> <a href="#"><img alt="" src="images/productslider10.png" width="100%;" width="100%;"></a> <div class="caption"> <p>Example Product</p> <p>123</p> <button type="button" class="addcart">ADD TO CART</button> </div><!--caption--> </div><!--THUMBNAIL--> </div><!--col--> </div><!--row--> </div><!--item--> </div><!--carousel-inner--> </div> <a data-slide="prev" href="#media" class="left carousel-control"><i class="fa fa-caret-left" aria-hidden="true" style="font-size: 40px; color: #000; margin-top: 120px; marginle"></i></a> <a data-slide="next" href="#media" class="right carousel-control"><i class="fa fa-caret-right" aria-hidden="true" style="font-size: 40px; color: #000; margin-top: 120px;"></i></a> </div><!--col--> <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" style="padding: 5px;"> <a href="#"><img src="images/productsliderbanner.png" width="100%;"></a> </div><!--col--> </div><!--row--> </div><!--container--> </section> <!--end productslider-->

/*start productslider*/ .whitecolor{ background-color: #fff; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2); height: 310px; padding-top: 40px; } .whitecolor h4{ line-height: 25px; } .thumbnail:hover{ margin: 0px -4px 0px -4px; border: 1px solid #ebebeb; -webkit-transition: margin 2s; /* Safari */ transition: margin 1s; } .thumbnail{ border: none; } .productslider p{ font-size: 16px; font-weight: bold; color: #817e7e } .addcart{ border: none; background-color: #e42d05; color: #fff; font-weight: bold; padding: 10px 15px 10px 15px; } .addcart:hover{ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .productslider{ padding: 20px 0 20px 0; } .carousel-control.right { background-image: none; } .carousel-control.left { background-image: none; } .fa-caret-left,.fa-caret-right{ padding:10px 10px 10px 10px; background-color: #fff; border: 1px solid #e5e5e5; } .fa-caret-left{ margin-left: -78px; } .fa-caret-right{ margin-right: -78px; } /*end productslider*/

<!--start product slider--> <script> $(document).ready(function() { $('#myCarousel').carousel({ interval: 10000 }) }); </script> <!--end product slider-->