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

<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> <span class="sr-only">Next</span> </a> <!-- Timer "progress bar"--> <hr class="transition-timer-carousel-left-progress-bar animate" /> <hr class="transition-timer-carousel-progress-bar animate" /> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#transition-timer-carousel" data-slide-to="0" class="active"></li> <li data-target="#transition-timer-carousel" data-slide-to="1" ></li> <li data-target="#transition-timer-carousel" data-slide-to="2"></li> </ol> <!-- Nav bar --> <div class="container"> <ul class="nav nav-pills nav-justified"> <li data-target="#transition-timer-carousel" data-slide-to="0" class="active first-li"> <a href="#">#1</a> </li> <li data-target="#transition-timer-carousel" data-slide-to="1" class="second-li"> <a href="#">#2</a> </li> <li data-target="#transition-timer-carousel" data-slide-to="2" class="third-li"> <a href="#">#3</a> </li> </ul> </div> </div> </div>
@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; } .transition-timer-carousel .transition-timer-carousel-left-progress-bar { display: block; height: 3px; background-color: #34495e; width: 0; margin: 0; border: none; z-index: 11; left: -15%; position: absolute; } .transition-timer-carousel .transition-timer-carousel-progress-bar.animate, .transition-timer-carousel .transition-timer-carousel-left-progress-bar.animate{ /* We make the transition time shorter to avoid the slide transitioning before the timer bar is "full" - change the 4.25s here to fit your carousel's transition time */ -webkit-transition: width 4.25s linear; -moz-transition: width 4.25s linear; -ms-transition: width 4.25s linear; -o-transition: width 4.25s linear; transition: width 4.25s linear; } .transition-timer-carousel .transition-timer-carousel-left-progress-bar.stopanimation, .transition-timer-carousel .transition-timer-carousel-progress-bar.stopanimation{ /* class to fix IE bug that make transition continue even when you remove the class .animate */ -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } .carousel-inner>.item>img{display: block;} .transition-timer-carousel .carousel-caption {display: block;position: absolute;} /* Slides specific settings */ .slidebox{ width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; min-height: 302px; } #slidebox-1-inner{ background-color: #999; } #slidebox-2-inner{ background-color: #888; } #slidebox-3-inner{ background-color: #777; } /* Nav */ .transition-timer-carousel .nav a { color: #767676; font-weight: bold; line-height: 1.2; margin-top: 26px; font-size: 14px; } .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus, .nav>li>a:focus, .nav>li>a:hover{color:#34495e;background: none;} .nav-pills>li{ cursor: pointer; width: 33%; display: block; float: left; margin: 0; padding: 0; } .nav-pills>li.active{font-weight: bold;} #home-carousel ul.nav{margin: 0;} /* indicators through ::before .nav-pills>li.active */ .nav-pills>li::before{ border-radius: 50%; box-sizing: border-box; display: inline-block; content: ''; left:0; right: 0; position: absolute; margin: auto; margin-top: -27px;; height: 55px; width: 55px; background:#b4b4b4; z-index: 12; } .nav-pills>li.active::before, .nav-pills>li.active>a::before, .nav-pills>li.active>a:hover::before, .nav-pills>li.active>a:focus::before, .nav>li>a:focus::before, .nav>li>a:hover::before, .nav-pills>li:hover::before { background:#34495e; } @media (min-width: 768px) { .carousel-control, .carousel-indicators{display: none;} } @media (max-width:767px) { ul.nav{display: none;} .transition-timer-carousel .transition-timer-carousel-progress-bar, .transition-timer-carousel .transition-timer-carousel-left-progress-bar{display: none;} }
// 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(); //The animate class gets removed so that it jumps straight back to indicated px if (currentSlide == 0) { $(".transition-timer-carousel-progress-bar", this) .addClass("stopanimation") .removeClass("animate") .css("width", "0"); $(".transition-timer-carousel-left-progress-bar", this) .addClass("stopanimation") .removeClass("animate") .css("width", hrLeftEnd + "px"); $('.nav li').removeClass('active'); $('.third-li').addClass('active'); } else if (currentSlide == 1) { $(".transition-timer-carousel-progress-bar", this) .addClass("stopanimation") .removeClass("animate") .css("width", hrRightSlide2Start + "px"); $(".transition-timer-carousel-left-progress-bar", this) .addClass("stopanimation") .removeClass("animate") .css("width", hrLeftEnd + "px"); $('.nav li').removeClass('active'); $('.first-li').addClass('active'); } else if (currentSlide == 2) { $(".transition-timer-carousel-progress-bar", this) .addClass("stopanimation") .removeClass("animate") .css("width", hrRightSlide3Start + "px"); $(".transition-timer-carousel-left-progress-bar", this) .addClass("stopanimation") .removeClass("animate") .css("width", "0"); $('.nav li').removeClass('active'); $('.second-li').addClass('active'); } }).on("slid.bs.carousel", function (event) { //The slide transition finished, so re-add the animate class so that //the timer bar takes time to fill up to indicated px var currentSlide = $(event.relatedTarget).index(); if (currentSlide == 0) { $(".transition-timer-carousel-progress-bar", this) .removeClass("stopanimation") .addClass("animate") .css("width", hrRightSlide1End + "px"); $('.nav li').removeClass('active'); $('.first-li').addClass('active'); } else if (currentSlide == 1) { $(".transition-timer-carousel-progress-bar", this) .removeClass("stopanimation") .addClass("animate") .css("width", hrRightSlide2End + "px"); $('.nav li').removeClass('active'); $('.second-li').addClass('active'); } else if (currentSlide == 2) { $(".transition-timer-carousel-progress-bar", this) .removeClass("stopanimation") .addClass("animate") .css("width", hrRightSlide3End + "px"); $(".transition-timer-carousel-left-progress-bar", this) .removeClass("stopanimation") .addClass("animate") .css("width", hrLeftEnd + "px"); $('.nav li').removeClass('active'); $('.third-li').addClass('active'); } }); /* Kick off the initial slide animation when the document is ready */ $(".transition-timer-carousel-progress-bar", "#transition-timer-carousel") .css("width", hrRightSlide1End + "px"); $(".transition-timer-carousel-left-progress-bar", "#transition-timer-carousel") .removeClass("animate").css("width", hrLeftEnd + "px"); // bootstrap carousel native script modified var clickEvent = false; $('#transition-timer-carousel') .on('click', '.nav li', function () { clickEvent = true; $('.nav li').removeClass('active'); $(this).addClass('active'); }) // modif: "on slide" instead of "on slid". Goal: the buble colors in blue directly at the end of the progress bar, not after the transition. .on('slide.bs.carousel', function () { if (!clickEvent) { var count = $('.nav').children().length - 1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if (count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });

Related: See More


Questions / Comments: