Aprenda neste tutorial como criar um carrossel com barra de progresso usando Bootstrap e jQuery. O processo de criação é simples e rápido de fazer. Assista no vídeo:
HTML
Insira esta tag abaixo da <div> dos controles e antes do fechamento da <div> do carrossel.
<hr class="barra anima" />
CSS
Crie estas classes e personalize como quiser.
.barra {
height: 5px;
background-color: #ff0000;
width: 0%;
margin: -5px 0px 0px 0px;
border: none;
z-index: 1;
position: relative;
}
.barra.anima {
-webkit-transition: width 4.25s linear;
-moz-transition: width 4.25s linear;
-o-transition: width 4.25s linear;
transition: width 4.25s linear;
}JS
Insira este código antes do fechamento da tag <body> de seu site.
<script type="text/javascript">
$(document).ready(function() {
$("#carousel-example-generic").on("slide.bs.carousel", function(event) {
$(".barra", this)
.removeClass("anima").css("width", "0%");
}).on("slid.bs.carousel", function(event) {
$(".barra", this)
.addClass("anima").css("width", "100%");
});
$(".barra", "#carousel-example-generic").css("width", "100%");
});
</script>
Para ver mais vídeos inscreva-se em meu canal no YouTube.
Artigo publicado originalmente em rvsanches.com.br
