Cómo cambiar la velocidad de transición del carrusel de Bootstrap (intervalo de tiempo)

Bootstrap es uno de los frameworks HTML/CSS/JavaScript más populares y ligeros para desarrolladores.
Se utiliza ampliamente para crear sliders de imágenes, banners principales e incluso temas de WordPress.
El carrusel de Bootstrap es una función ideal para mostrar imágenes o contenido de forma fluida y responsive.

Por defecto, el carrusel avanza automáticamente con un intervalo predefinido, pero quizá quieras
controlar la velocidad del slider según tu diseño: más rápido para previsualizaciones rápidas
o más lento para presentaciones narrativas. A continuación aprenderás a ajustar el
intervalo de tiempo e incluso a afinar la velocidad de animación con unas pocas líneas de código.

No es necesario modificar los archivos principales de JavaScript o CSS de Bootstrap.
Basta con sobrescribir los ajustes en tu HTML y hoja de estilos.

Configuración del intervalo de tiempo del carrusel de Bootstrap

Aquí tienes el snippet predeterminado del carrusel:

<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>

Añadir el atributo `data-interval`

Para definir cuánto tiempo se muestra cada slide, añade data-interval al contenedor del carrusel:

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

1000 = 1 segundo
3000 = 3 segundos
Reemplaza 3000 por el intervalo que necesites.

Es la forma más sencilla de controlar la velocidad del carrusel en un sitio responsive.

Cambiar la duración de la animación en CSS

El intervalo controla cuánto tiempo permanece visible cada slide, pero también puedes
personalizar la animación. Por defecto, Bootstrap usa una transición de 0.6 segundos.
Si quieres un fade o slide más lento, aumenta el tiempo en tu propia hoja de estilos.

.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;
}

Aquí la animación se reduce a 1.2 segundos. Ajusta el valor según el efecto deseado.

¿Por qué ajustar la velocidad del carrusel?

Experiencia de usuario: slides más largos para narrativas o destacados de producto.
E-commerce: slides más rápidos para explorar imágenes.
SEO y engagement: interacciones fluidas suelen retener a los usuarios más tiempo.
Temas de WordPress: muchos temas usan Bootstrap; estos ajustes funcionan igual.

Conclusión

El carrusel de Bootstrap es simple, responsive y muy compatible. Ajustando el
intervalo y la duración de la animación, lograrás que tu slider destaque,
ya sea en un portafolio, blog o tienda online.