<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript"> $(document).ready(function() { $('.carousel').each(function(){ $(this).carousel({ pause: true, interval: false }); }); }); </script> <div class="container"> <div class="row"> <div class="row"> <div class="col-md-9"> <h3> Carousel Product Cart Slider</h3> </div> <div class="col-md-3"> <!-- Controls --> <div class="controls pull-right hidden-xs"> <a class="left fa fa-chevron-left btn btn-success" href="#carousel-example" data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-success" href="#carousel-example" data-slide="next"></a> </div> </div> </div> <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              01.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              02.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              03.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              04.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              05.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              06.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              07.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              08.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              09.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              10.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              11.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              12.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              13.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              14.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              15.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              16.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              17.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              18.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              19.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              20.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              21.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              22.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              23.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              24.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              25.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              26.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              27.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              28.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              29.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              30.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> <div class="col-sm-2"> <div class="col-item"> <div class="photo"> <div class="box"> <p class="hover"></p> <a style="text-decoration: none;" style="text-decoration: none;" href="https://www.facebook.com"><div class="mask"><p style="color: #FFFFFF;"><b>                              31.01.</b></p></div></a> </div> <a style="text-decoration: none;" href="https://www.facebook.com"><img src="http://www.umnet.com/pic/diy/screensaver/a781f1f0-4162.jpg" class="img-responsive" alt="a" /></a> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Grouped Product</h5> <h5 class="price-text-color"> $249.99</h5> </div> <div class="rating hidden-sm col-md-6"> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $149.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price col-md-6"> <h5> Product with Variants</h5> <h5 class="price-text-color"> $199.99</h5> </div> <div class="rating hidden-sm col-md-6"> <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star"> </i><i class="fa fa-star"></i> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Add to cart</a></p> <p class="btn-details"> <i class="fa fa-list"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">More details</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); .col-item { border: 8px solid #FFFFFF; border-radius: 50px; background: #FFF; } .col-item .photo img { position: relative; margin: 0 auto; width: 100%; z-index=5; } .col-item .info { padding: 10px; border-radius: 0 0 5px 5px; margin-top: 10px; } .hover { z-index: 1; } .mask { position: relative; height: 110px; top: 0; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; opacity: 0; z-index: 3; } .box { position: absolute; z-index=1; } .box:hover .mask { opacity: 1; } .col-item .price { /*width: 50%;*/ float: left; margin-top: 5px; } .col-item .price h5 { line-height: 20px; margin: 0; } .price-text-color { color: #219FD1; } .col-item .info .rating { color: #777; } .col-item .rating { /*width: 50%;*/ float: left; font-size: 17px; text-align: right; line-height: 52px; margin-bottom: 10px; height: 52px; } .col-item .separator { border-top: 1px solid #E1E1E1; } .clear-left { clear: left; } .col-item .separator p { line-height: 20px; margin-bottom: 0; margin-top: 10px; text-align: center; } .col-item .separator p i { margin-right: 5px; } .col-item .btn-add { width: 50%; float: left; } .col-item .btn-add { border-right: 1px solid #E1E1E1; } .col-item .btn-details { width: 50%; float: left; padding-left: 10px; } .controls { margin-top: 20px; } [data-slide="prev"] { margin-right: 10px; }