Carruseles & Slideshows
Displays de contenido rotativo con controles de navegación
1 Carrusel Básico
El carrusel más simple con imágenes que se deslizan automáticamente.
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">...</div>
<div class="carousel-item">...</div>
</div>
<button class="carousel-control-prev">...</button>
<button class="carousel-control-next">...</button>
</div>data-bs-ride="carousel"
inicia el auto-play. El primer
.carousel-item
debe tener la clase
.active
.
2 Con Indicadores
Añade puntos indicadores para mostrar el slide actual y permitir navegación directa.
<div class="carousel-indicators">
<button data-bs-slide-to="0" class="active"></button>
<button data-bs-slide-to="1"></button>
<button data-bs-slide-to="2"></button>
</div>3 Con Subtítulos
Añade texto superpuesto a tus slides con
.carousel-caption
.
Paisajes de Montaña
Descubre vistas impresionantes de picos majestuosos y valles serenos.
Vida Urbana
Explora la vibrante energía de las ciudades modernas y la arquitectura.
Playas de Playa
Relájate con el tranquilo sonido de las olas y las costas de arena.
.d-none .d-md-block
para ocultarse en pantallas pequeñas donde el texto podría ser ilegible.
4 Efecto de Crossfade
Cambia el efecto de slide predeterminado por una transición de fade añadiendo
.carousel-fade
.
Efecto Fade Suave
Observe cómo las imágenes se desvanecen entre sí en lugar de deslizarse.
Transición Elegante
Perfecto para galerías sofisticadas y portafolios.
Experiencia Profesional
Crea una atmósfera más refinada para tu contenido.
5 Ejemplo Práctico: Testimonios de Clientes
Los carruseles no son solo para imágenes. Úsalos para mostrar testimonios, reseñas o cualquier contenido.
"Este producto transformó completamente nuestra forma de trabajar. ¡Altamente recomendado!"
"Servicio al cliente excepcional y un producto increíble. Cinco estrellas bien merecidas."
"Fácil de usar, potente y exactamente lo que necesitábamos. ¡No podríamos estar más contentos!"
🎯 Auto-play
data-bs-ride="carousel"
⏱️ Intervalo
data-bs-interval="5000"
🔄 Loop Infinito
Automáticamente por defecto
⌨️ Navegación por Teclado
Flechas izquierda/derecha
👆 Touch/Swipe
En dispositivos móviles
♿ Accesibilidad
ARIA incluido
🎯 Puntos Clave sobre Carruseles
- Versátil: Funciona con imágenes, texto, cards y cualquier contenido HTML
- Configurable: Control sobre intervalos, auto-play, efectos de transición
- Accesible: Incluye navegación por teclado y atributos ARIA
- Responsive: Se adapta automáticamente al tamaño de la pantalla
- Sin JavaScript: Funciona completamente con atributos de datos