/* Carousel */
.carousel-indicators li{
display:block;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px;
/* Control buttons */
/* Previous button */
/* Next button */
/* Changes the position of the indicators */
/* Changes the color of the indicators */
}
.carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
.carousel-control.left {
left: -60px;
}
.carousel-control.right {
right: -60px;
}
.carousel-indicators {
left:100%;
margin-left: -15%;
width: 20%;
top: 10%;
}
.carousel-indicators li {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
border: 4px solid #CCC;
border-radius: 50px;
opacity: 0.4;
overflow: hidden;
transition: all 0.4s;
}
.carousel-indicators .active {
background: #333333;
width: 128px;
height: 128px;
border-radius: 100px;
border-color: #f33;
opacity: 1;
overflow: hidden;
}
.transition-timer-carousel-progress-bar {
height: 5px;
background-color: #5cb85c;
width: 0%;
margin: -5px 0px 0px 0px;
border: none;
z-index: 11;
position: relative;
}
.transition-timer-carousel-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;
-o-transition: width 4.25s linear;
transition: width 4.25s linear;
}
$(document).ready(function() {
//Events that reset and restart the timer animation when the slides change
$("#transition-timer-carousel").on("slide.bs.carousel", function(event) {
//The animate class gets removed so that it jumps straight back to 0%
$(".transition-timer-carousel-progress-bar", this)
.removeClass("animate").css("width", "0%");
}).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
$(".transition-timer-carousel-progress-bar", this)
.addClass("animate").css("width", "100%");
});
//Kick off the initial slide animation when the document is ready
$(".transition-timer-carousel-progress-bar", "#transition-timer-carousel")
.css("width", "100%");
});
