Cómo crear un carrusel de imagen o video en Bootstrap (con ejemplo)

Cada vez más empresas priorizan la calidad de su presencia digital porque tienen claro que su relevancia toca diferentes aspectos de su trabajo.

Por supuesto, en primer plano, destaca el vínculo que tienen con sus clientes y prospectos, ya que, aunque una organización no se dedique al ecommerce, sus medios digitales, hoy, son imprescindibles para aportarles información clara y confiable sobre sus productos o servicios, recibir y entregar quejas o sugerencias; así como mostrarles sus valores y metas empresariales para que, de esta manera, los usuarios sepan si les conviene sostener una relación comercial o no con una compañía.

Para conseguir que una plataforma digital cumpla con esos propósitos, lo más importante es procurar que se comparta un contenido de calidad en un formato atractivo y accesible. Por esto, el diseño web ofrece posibilidades variadas para crear composiciones dirigidas a esa metas, como los carruseles. En este artículo, te contamos cómo puedes implementar este elemento en la página web de tu negocio para favorecer su accesibilidad y funcionamiento.

Qué es un carrusel de imagen o video

En el diseño web, un carrusel es un componente interactivo que muestra una serie de elementos, como imágenes, texto o contenido multimedia, de forma rotativa y automática en una página. Es similar a un «slider» o «slideshow».

El carrusel suele presentar varios contenidos, uno tras otro, en un área designada del sitio y se desplaza horizontal o verticalmente, según su configuración. Los usuarios pueden navegar por los componentes del carrusel mediante controles de flechas, botones o indicadores visuales.

El objetivo principal de un carrusel es mostrar elementos destacados o promocionales, de manera llamativa y compacta. Puede utilizarse para resaltar productos, anunciar noticias o artículos, enseñar testimonios de clientes, entre otros propósitos.

Los carruseles pueden implementarse con HTML, CSS y JavaScript o bibliotecas y plugins de JavaScript específicos que facilitan su creación e interacción. En el siguiente apartado, te decimos cómo pueden crear un carrusel en Bootstrap para la página web de tu negocio.

1. Instala Bootstrap en tu proyecto

Comienza por asegurarte que cuentas con Bootstrap en tu proyecto. Puedes incluir los archivos CSS y JavaScript de Bootstrap en tu página HTML mediante enlaces CDN o al descargar los archivos e incluirlos localmente.

2. Agrega el marcado HTML para el carrusel

Escribe el marcado HTML para el carrusel. Puedes usar la siguiente estructura como punto de partida:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicadores -->
  <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>
  </ol>

  <!-- Slides del carrusel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="ruta-de-la-imagen-1.jpg" alt="Imagen 1">
      <div class="carousel-caption">
        <h3>Título de la imagen 1</h3>
        <p>Descripción de la imagen 1</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="ruta-de-la-imagen-2.jpg" alt="Imagen 2">
      <div class="carousel-caption">
        <h3>Título de la imagen 2</h3>
        <p>Descripción de la imagen 2</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="ruta-de-la-imagen-3.jpg" alt="Imagen 3">
      <div class="carousel-caption">
        <h3>Título de la imagen 3</h3>
        <p>Descripción de la imagen 3</p>
      </div>
    </div>
  </div>

  <!-- Controles del carrusel -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Siguiente</span>
  </a>
</div>

3. Reemplaza la ruta

Cambia la «ruta-de-la-imagen-X.jpg» de la estructura anterior con las rutas de las imágenes que deseas mostrar en el carrusel. Asegúrate de que sean válidas, es decir, que correspondan a los archivos que vas a añadir.

4. Personaliza el contenido

Puedes personalizar el contenido dentro de cada carousel-item según tus necesidades, como los títulos y las descripciones de las imágenes.

5. Ajusta la apariencia

De forma opcional, puedes ajustar la apariencia y el estilo del carrusel con las clases y estilos de Bootstrap o a través del CSS, esto depende de las características de tu proyecto.

6. Habilita el carrusel

Agrega el siguiente script al final del cuerpo de tu página HTML para habilitar el funcionamiento del carrusel:

<script src="ruta-del-archivo-bootstrap.js"></script>
<script>
  $('.carousel').carousel();
</script>

¿Cómo crear un carrusel de video en Bootstrap?

Si necesitas o deseas crear un carrusel de videos, en lugar de imágenes, realiza los siguientes cambios en el código:

1. Reemplaza la etiqueta de imagen

Para que tu carrusel contenga videos, en vez de la etiqueta <img>, utiliza <video>:

<div class="carousel-item active">
  <video controls>
    <source src="ruta-del-video-1.mp4" type="video/mp4">
    Tu navegador no admite el elemento de video.
  </video>
  <div class="carousel-caption">
    <h3>Título del video 1</h3>
    <p>Descripción del video 1</p>
  </div>
</div>

Cómo cambiar el tamaño del carrusel

Para cambiar el tamaño del carrusel, puedes aplicar estilos CSS personalizados:

1. Emplea una clase personalizada

Agrega una clase personalizada al contenedor principal del carrusel. Por ejemplo, puedes llamarlo «.carousel-container»:

<div id="myCarousel" class="carousel slide carousel-container" data-ride="carousel">
  <!-- Contenido del carrusel -->
</div>

2. Define los estilos CSS para el contenedor principal

Especifica los estilos CSS para la clase .carousel-container en tu archivo CSS o en la etiqueta <style> en el encabezado de tu HTML. Aquí hay una muestra de cómo puedes cambiar el tamaño del carrusel en el código:

.carousel-container {
  max-width: 800px; /* Establece el ancho máximo del carrusel */
  margin: 0 auto; /* Centra horizontalmente el carrusel */
}

Ventajas y desventajas de crear un carrusel en Bootstrap

A continuación, te decimos qué tipo de beneficios o complicaciones puede aportar este elemento al diseño de tu página web.

Ventajas

• Interactividad y dinamismo. Los carruseles permiten mostrar contenido de forma dinámica y atractiva, lo que captura la atención de los usuarios y hacer que interactúen con el contenido de tu sitio web.
• Ahorro de espacio. Presentan múltiples elementos en un espacio reducido. Esto es útil cuando se desea exponer una gran cantidad de contenido destacado o promocional en una página web sin ocupar demasiado espacio en pantalla.
• Destacar contenido relevante. Resalta productos, noticias sobresalientes, testimonios de clientes, entre otros. Esto ayuda a destacar el contenido más importante y llamar la atención de los visitantes de tu sitio web.
• Integración con Bootstrap. Al utilizar el carrusel de Bootstrap, se aprovechan las ventajas y características de este popular framework de desarrollo web. En este caso, un carrusel estará diseñado para funcionar de manera fluida y responsiva en dispositivos móviles y de escritorio.

Desventajas

• Problemas de usabilidad. Si el carrusel se configura para que se mueva automáticamente, puede dificultar la lectura y la interacción del usuario, pues el contenido puede cambiar antes de que se pueda leer o hacer clic en él.
• Posible impacto en la velocidad de carga. Cuando el carrusel incluye imágenes o videos pesados, puede afectar el tiempo de carga de la página. Esto puede ser problemático en dispositivos móviles o para las conexiones de Internet lentas.
• Problemas de accesibilidad. Pueden presentar un desafío de accesibilidad para usuarios con discapacidades visuales o de movilidad. Los cambios automáticos de contenido y la falta de controles claros pueden dificultar la navegación y el acceso al para estos usuarios.
• Diseño y contenido inapropiados. Si no se seleccionan, de manera adecuada, las imágenes, videos o texto del carrusel o si el diseño no es coherente con el resto del sitio web, puede resultar en una experiencia confusa o poco atractiva para los usuarios.

Alternativas para la creación de un carrusel

Si la implementación de un carrusel con Bootstrap no es muy favorecedora para tu proyecto digital, aquí te damos algunas opciones tecnológicas que te permitirán también añadir este elemento en tu página.

• Slick. Slick es una biblioteca de JavaScript que te permite crear carruseles personalizados con características avanzadas. Proporciona una amplia gama de opciones de diseño, como transiciones, efectos, controles de navegación y paginación. Asimismo, es flexible y fácil de implementar.
• Owl Carousel. Owl Carousel es otra biblioteca de JavaScript que ofrece una solución fácil para crear carruseles responsivos. Tiene muchas posibilidades de configuración y es compatible para arrastrar y soltar, los controles de navegación, paginación y más.
• Swiper. Swiper es una biblioteca moderna y potente para crear carruseles y sliders interactivos. Es personalizable, se ajusta a los gestos táctiles en los dispositivos móviles y ofrece una amplia gama de efectos de transición y diseño.
• Glide.js. Glide.js es una biblioteca ligera y flexible para crear carruseles responsivos. Se enfoca en el rendimiento y la optimización, de las misma manera que proporciona características como la navegación por teclado, deslizamiento, paginación y más.
• Splide. Splide es otra opción liviana y fácil de usar para crear carruseles responsivos. Ofrece una configuración simple y rápida, admite navegación táctil, paginación, flechas de navegación y proporciona un enfoque en la accesibilidad.

Antes de decidir implementar un carrusel en tu sitio web, es esencial que contemples tus necesidades y objetivos específicos, para saber si el carrusel es la mejor opción para presentar tu contenido y si las ventajas superan las posibles limitaciones y desventajas.

Además, te recomendamos siempre optimizar el rendimiento y la usabilidad al crear páginas web con un carrusel: asegurarte de seleccionar imágenes o videos ideales en términos de tamaño y peso, implementar controles de navegación y evaluar la experiencia de los usuarios para realizar ajustes y mejoras continuas.

Los carruseles en Bootstrap son una excelente herramienta para presentar contenido destacado de manera atractiva, pero deben usarse de manera estratégica, según los requisitos de tu proyecto y las buenas prácticas de desarrollo web.