Como criar carrossel com barra de progresso usando Bootstrap e jQuery

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.


&lt;hr class="barra anima" /&gt;

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.


&lt;script type="text/javascript"&gt;
$(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%");
});
&lt;/script&gt;

Aproveite e aprenda como criar um carrossel com várias colunas com Bootstrap, sendo 2 colunas para imagens e 2 para textos.

Para acompanhar mais ví­deos inscreva-se em meu canal no YouTube.


Publicado em 26 de novembro de 2016


Dúvidas? Deixe seu comentário.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*
*