Ricardo Sanches

O conhecimento é sua asa.
Use-o e voe.

Como criar carrossel com barra de progresso usando Bootstrap e jQuery

Publicado em: 26/11/16

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.

Escreva sua resposta

Seu e-mail não será publicado.

*
*

Conteúdos exclusivos em seu e-mail!

Veja as novidades primeiro

Pesquisar no site

No Instagram

Site criado e mantido com muito amor por @RicardoVSanches.

Design e desenvolvimento com Bootstrap 4 e WordPress.

Este site utiliza cookies, ao continuar navegando você concorda com isso.