<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="div-header"> <h3>the materials</h3> </div> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <ul class="thumbnails"> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1721" alt="" style="text-align: center; width: 100%;" class="img-circle"> <div class="caption"> <img src="/web/image/1717" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">black leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1740" alt="" style="text-align: center; width: 100%;" class="img-circle"> <div class="caption"> <img src="/web/image/1743" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">white leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1739" alt="" style="text-align: center; width: 100%;" class="img-circle"> <div class="caption"> <img src="/web/image/1742" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">red leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1731" alt="" style="text-align: center; width: 100%;" class="img-circle"> <div class="caption"> <img src="/web/image/1725" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">blue leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> </ul> </div><!-- /Slide1 --> <div class="item"> <ul class="thumbnails"> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1733" alt="" style="text-align: center; width: 100%; animation: none;" class="img-circle"> <div class="caption"> <img src="/web/image/1727" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">green leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1741" alt="" style="text-align: center; width: 100%;" class="img-circle"> <div class="caption"> <img src="/web/image/1730" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">yellow leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1737" alt="" style="text-align: center; width: 100%;" class="img-circle"> <div class="caption"> <img src="/web/image/1729" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">orange leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> <li class="col-sm-3"> <div class="fff"> <img src="/web/image/1736" alt="" style="text-align: center; width: 100%;" class="img-circle"> <div class="caption"> <img src="/web/image/1728" class="pull-left" style="width: 100%;"> <h4 style="text-align: center; ">milky leather</h4> <p style="text-align: center;"><span style="color: rgb(51, 51, 51)"></span></p><div style="text-align: center;"><span style="line-height: 1.42857;">ADAPT THESE THREE COLUMNS TO FIT YOU DESIGN NEED. TO DUPLICATE, DELETE OR MOVE COLUMNS, SELECT THE COLUMN AND USE THE TOP ICONS TO PERFORM YOUR ACTION.</span><p></p> </div> </div> </div></li> </ul> </div><!-- /Slide1 --> </div> <nav> <ul class="control-box pager"> <li><a data-slide="prev" href="#myCarousel"><i class="fa fa-chevron-left fa-1x" style=""></i></a></li> <li><a data-slide="next" href="#myCarousel"><i class="fa fa-chevron-right fa-1x" style=""></i></a></li> </ul> </nav> </div> </div>

.div-header { background: transparent; margin: -30px -40px 40px; padding: 20px 40px; border-top: 0px; color: transparent; text-transform: uppercase; } .div-header h3 { line-height: 0.88rem; color: #000; } .thumbnails li> .fff .caption { background:#fff !important; } .carousel-inner ul{ padding-left: 0px !important; } /* Mobile Only */ @media (max-width: 767px) { .page-header, .control-box { text-align: center; } } @media (max-width: 479px) { .caption { word-break: break-all; } } li { list-style-type:none;} ::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; } ::-moz-selection { background: #ff5e99; color: #FFFFFF; }