Bootstrap Snippet Carousel + call to action button 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 ---------->
<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <a href="#"><img src="http://placehold.it/760x475/cccccc/ffffff"></a>
        </div><!-- End Item -->
 
         <div class="item">
          <a href="#"><img src="http://placehold.it/760x475/999999/cccccc"></a>
        </div><!-- End Item -->
        
        <div class="item">
          <a href="#"><img src="http://placehold.it/760x475/dddddd/333333"></a>
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->
    <ul class="list-group col-sm-4">
      <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li>
      <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li>
      <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor invidunt ut labore et dolore</h4></li>
      <li class="list-group-item-action"><a href="#"><h4>Call to action</h4></a></li>
    </ul>
    
      <!-- Controls -->
      <div class="carousel-controls">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
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
body { padding-top: 50px; }
#myCarousel .carousel-caption {
    left:0;
    right:0;
    bottom:0;
    text-align:left;
    padding:10px;
    background:rgba(0,0,0,0.6);
    text-shadow:none;
}
#myCarousel .list-group {
    position:absolute;
    top:0;
    right:0;
    margin-right: -20px;
}
#myCarousel .list-group-item, 
#myCarousel .list-group-item-action {
    border-radius:0px;
    cursor:pointer;
    height: 115px;
    margin-bottom: 5px;
    border-width: 0 0 1px 0;
    position: relative;
}
#myCarousel .list-group .active {
    background-color:green;
}
#myCarousel .list-group li {
    padding: 20px;
}
#myCarousel .list-group-item-action, 
#myCarousel .list-group-item-action.active {
    background-color: blue !important;
    list-style: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
    
    var clickEvent = false;
    $('#myCarousel').carousel({
        interval:   4000    
    }).on('click', '.list-group .list-group-item', function() {
            clickEvent = true;
            $('.list-group .list-group-item').removeClass('active');
            $(this).addClass('active');     
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.list-group').children().length -2;
            var current = $('.list-group .list-group-item.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if(count == id) {
                $('.list-group .list-group-item').first().addClass('active');   
            }
        }
        clickEvent = false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Carousel + call to action button"
Bootstrap 3.3.0 Snippet by maridlcrmn

Related: See More

Questions / Comments:

"Carousel + call to action button" Bootstrap 3.3.0 Snippet by maridlcrmn

Related: See More

Questions / Comments:

"Carousel + call to action button"
Bootstrap 3.3.0 Snippet by maridlcrmn