Como alterar a velocidade de transição do carrossel do Bootstrap (intervalo de tempo)

O Bootstrap é um dos frameworks HTML/CSS/JavaScript mais populares e leves para desenvolvedores.
É muito usado para sliders de imagens, hero banners e até temas para WordPress.
O carrossel do Bootstrap é perfeito para exibir imagens ou conteúdo de forma fluida e responsiva.

Por padrão, o carrossel avança automaticamente em um intervalo definido, mas você pode
controlar a velocidade do slider conforme o seu design: mais rápido para pré-visualizações,
ou mais lento para slides narrativos. A seguir, veja como ajustar o
intervalo de tempo e refinar a duração da animação com poucas linhas de código.

Não é preciso mexer nos arquivos centrais de JavaScript ou CSS do Bootstrap.
Basta ajustar no seu HTML e na sua folha de estilos.

Configuração do intervalo de tempo do carrossel

Veja o snippet padrão do carrossel:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
    <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div>
  </div>
  
  <!-- Left and right controls --> 
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> 
</div>

Adicionar o atributo `data-interval`

Para definir por quanto tempo cada slide fica visível, adicione data-interval ao contêiner do carrossel:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>

1000 = 1 segundo
3000 = 3 segundos
Substitua 3000 pelo intervalo que preferir.

É a forma mais simples de controlar a velocidade do carrossel em sites responsivos.

Alterar a duração da animação no CSS

O intervalo controla quanto tempo cada slide aparece, mas você também pode
personalizar o efeito de animação. O padrão do Bootstrap é 0,6 segundo.
Para um fade ou slide mais lento, aumente o tempo no seu CSS.

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}

Acima ajustamos para 1,2 segundo. Modifique conforme o efeito desejado.

Por que ajustar a velocidade do carrossel?

Experiência do usuário: slides mais longos para narrativa ou destaques.
E-commerce: slides mais rápidos para explorar produtos.
SEO e engajamento: interações suaves ajudam a reter visitantes.
Temas WordPress: muitos temas usam Bootstrap; os ajustes funcionam igual.

Conclusão

O carrossel do Bootstrap é simples, responsivo e amplamente suportado.
Ajustando o intervalo e a duração da animação, seu slider ganha destaque em
portfólios, blogs e lojas virtuais.