"Slider Carousel four rows"
Bootstrap 3.3.0 Snippet by ajithraj

<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="clear" style="width:100%;height:100px;"></div> <div class="container"> <header id="myCarousel" class="carousel slide"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service One</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service Two</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service Three</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service Four</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service One</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service Two</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service Three</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="panel panel-default text-center"> <div class="panel-heading"> <div class="col-img-responsive02"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div> <img src="http://lorempixel.com/400/200" /> </div> <div class="panel-body"> <h4>Service Four</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a class="btn btn-primary" href="#">Learn More <i class="fa fa-chevron-right"></i></a> </div> </div> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span aria-hidden="true"><i class="fa fa-chevron-circle-left"></i> </span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span aria-hidden="true"><i class="fa fa-chevron-circle-right"></i> </span> <span class="sr-only">Next</span> </a> </div> </header> </div>
.fa.fa-chevron-circle-right { right: 0; } .fa.fa-chevron-circle-left { left: 0; } .fa.fa-chevron-circle-right, .fa.fa-chevron-circle-left { margin-bottom: 1px; position: absolute; top: -30px; color:#FF7700; } .col-img-responsive02 span{ color:#fff; } .col-img-responsive02 { display:none; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); height: 100%; position: absolute; width: 100%; } .carousel-control{ width:5%; } .panel-body{ position:relative; padding:0px; } .btn-primary { background-color: #337ab7; border-color: #2e6da4; border-radius: 0; bottom: -15px; color: #fff; position: relative; width: 100%; -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38); -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38); box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38); } .btn-primary { background-color: #ff7700; border-color: #fff; } .panel-default{ -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38); -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38); box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38); border: medium none; border-radius: 0; } .panel-heading{ padding:0px; position:relative; } .panel-heading img{ width:100%; } .carousel-control.left { background-image: none; } .carousel-control.right{ background-image: none; }
$(document).ready(function(){ $('.carousel').carousel({ pause: true, interval: false }); }); $(document).ready(function(){ $(".col-md-3 ").mouseenter(function(){ $(this).find(".col-img-responsive02").show(200); }); $(".col-md-3").mouseleave(function(){ $(this).find(".col-img-responsive02").hide(); }); });

Related: See More


Questions / Comments: