Bootstrap Snippet Slider Carousel four rows using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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();
}); 
}); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slider Carousel four rows"
Bootstrap 3.3.0 Snippet by zubair-saif

Related: See More

Questions / Comments:

"Slider Carousel four rows" Bootstrap 3.3.0 Snippet by zubair-saif

Related: See More

Questions / Comments:

"Slider Carousel four rows"
Bootstrap 3.3.0 Snippet by zubair-saif