<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="page-header"> <h3>Bootstrap 3.3.0</h3> <p>Bootstrap item carousel | Developer TECHFONI</p> </div> <div class="container"> <div class="col-xs-12"> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <ul class="thumbnails"> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> </ul> </div><!-- /Slide1 --> <div class="item"> <ul class="thumbnails"> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> </ul> </div><!-- /Slide2 --> <div class="item"> <ul class="thumbnails"> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> <li class="col-sm-3"> <div class="casing"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>Item Title</h4> <p>Hello world, something nice to develop</p> <a class="btn btn-mini" href="#">» Read More</a> </div> </div> </li> </ul> </div><!-- /Slide3 --> </div> <nav> <ul class="control-box pager"> <li class="left"><a data-slide="prev" href="#myCarousel" class="arrowStil"><i class="glyphicon glyphicon-chevron-left"></i></a></li> <li class="right"><a data-slide="next" href="#myCarousel" class="arrowStil"><i class="glyphicon glyphicon-chevron-right"></i></li> </ul> </nav> <!-- /.control-box --> </div><!-- /#myCarousel --> </div><!-- /.col-xs-12 --> </div><!-- /.container -->

img { max-width:100%; } a { -webkit-transition: all 150ms ease; -moz-transition: all 150ms ease; -ms-transition: all 150ms ease; -o-transition: all 150ms ease; transition: all 150ms ease; } a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ filter: alpha(opacity=50); /* IE7 */ opacity: 0.6; text-decoration: none; } body{ border-top:0; background:#fff; } .btn-mini{ border-top: 1px solid #e8e8e8; border-radius: 0px; width: 100%; color: #b2adad; } .casing{ border:1px solid #e8e8e8; float:left; width:100%; } .thumbnail { padding: 0px !important; border-radius: 0px !important; border: none !important; } .thumbnails li> .fff .caption { background:#fff !important; padding:10px } .page-header { background: #ffffff7a; margin: 0px 0px 22px; padding: 1px 40px; border-top: 4px solid #ccc; color: #999; text-transform: uppercase; } .page-header p{ text-align:center; } .page-header h3 { line-height: 0.88rem; color: #000; text-align:center; font-size:20px; font-weight:bold; } ul.thumbnails { margin-bottom: 0px; } .caption h4 { color: #444; text-indent: 10px; } .caption p { color: #999; padding: 0px 10px; } .control-box { text-align: right; width: 100%; margin-top: -152px; } .carousel-control{ background: #666; border: 0px; border-radius: 0px; display: inline-block; font-size: 34px; font-weight: 200; line-height: 18px; opacity: 0.5; padding: 4px 10px 0px; position: static; height: 30px; width: 15px; } @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; } .left{ float:left; } .right{ float:right; margin-right:-35px; } .arrowStil{ border-radius: 23px !important; padding: 11px 14px !important; }

$(document).ready(function() { $('.carousel').carousel({ interval: 6000 }) });