"Carousel with progress bar and bubble Caption"
Bootstrap 3.2.0 Snippet by tvinchent

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="carousel-wrapper" id="home-carousel">
<div id="transition-timer-carousel" class="carousel slide transition-timer-carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="slidebox-1-inner" class="slidebox no-gutter-xs">
#1
</div>
</div>
<div class="item">
<div id="slidebox-2-inner" class="slidebox no-gutter-xs">
#2
</div>
</div>
<div class="item">
<div id="slidebox-3-inner" class="slidebox no-gutter-xs">
#3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#transition-timer-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#transition-timer-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
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
@font-face {
font-family:"AvenirLTStdRoman";
font-style:normal;
font-weight:normal;
src:url("/font/AvenirLTStd-Roman.eot");
src:url("/font/AvenirLTStd-Roman.eot?#iefix") format("embedded-opentype"),
url("/font/AvenirLTStd-Roman.woff") format("woff"),
url("/font/AvenirLTStd-Roman.ttf") format("truetype"),
url("/font/AvenirLTStd-Roman.svg#AvenirLTStdRoman") format("svg");
}
.carousel-wrapper {background:#fff;overflow: hidden;}
.transition-timer-carousel .carousel-caption {
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
text-align: left;
padding-top: 5px;
padding-left: 15%;
padding-right: 15%;
}
.transition-timer-carousel .carousel-caption .carousel-caption-header {margin-top: 10px;font-size: 24px;}
.transition-timer-carousel .carousel-indicators {bottom: 0;margin-bottom: 0;}
.transition-timer-carousel .carousel-control {z-index: 11;}
/* progress bar */
.transition-timer-carousel .transition-timer-carousel-progress-bar {
display: block;
height: 3px;
background-color: #34495e;
width: 0%;
margin: 0;
border: none;
z-index: 11;
position: absolute;
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
// Compute of the coords of the progress bar for the three steps
function carouselMarqueur() {
windowW = $(window).width();
containerWidth = $('#home-carousel .carousel-indicators + .container').eq(0).width();
containerLeft = Math.round((windowW - containerWidth) / 2);
pillWidth = 55;
liWidth = $('.nav-pills li').eq(0).innerWidth();
bubleLeftFromBorderContainer = Math.round((liWidth - pillWidth) / 2);
hrRightStart = containerLeft + bubleLeftFromBorderContainer + pillWidth;
$(".transition-timer-carousel-progress-bar").css("left", hrRightStart + "px");
hrRightSlide1End = 2 * bubleLeftFromBorderContainer;
hrRightSlide2Start = hrRightSlide1End + pillWidth;
hrRightSlide2End = hrRightSlide2Start + (2 * bubleLeftFromBorderContainer);
hrRightSlide3Start = hrRightSlide2End + pillWidth;
hrRightSlide3End = hrRightSlide3Start + (2 * bubleLeftFromBorderContainer) + (2 * containerLeft);
hrLeftStart = -(bubleLeftFromBorderContainer + containerLeft);
$(".transition-timer-carousel-left-progress-bar").css("left", hrLeftStart + "px");
hrLeftEnd = -hrLeftStart + containerLeft + bubleLeftFromBorderContainer;
}
$(document).ready(function () {
/* call and change coords for the progress bar on resize */
carouselMarqueur();
$(window).resize(function () {
carouselMarqueur();
});
//Events that reset and restart the progress bar when the slides change
$("#transition-timer-carousel").on("slide.bs.carousel", function (event) {
var currentSlide = $(event.relatedTarget).index();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: