Cadastre-seLoginGovernança e GestãoDesenvolvimentoDesignMarketing DigitalBanco de DadosInfra EstruturaMobileMaisVagas de trabalhoCursosVideoaulasProfissõesComunidadesMembrosPerguntasPerguntas
Ricardo Sanches

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.

<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

Comentários