Crear un Carousel Slider con Glide.js y Bootstrap 5

Hoy en día, a la hora de desarrollar un sitio web, una aplicación o un software, se presta mucha atención al aspecto gráfico.

Hay muchos widgets (componentes gráficos) que se utilizan para embellecer nuestra aplicación, entre los más populares se encuentra el Carousel Slider. Este último se utiliza principalmente para mostrar imágenes, eslóganes o productos en el caso específico del comercio electrónico. Se puede hacer un Slider con desplazamiento manual: con la ayuda de flechas o viñetas, o automático: configurando un temporizador de transición.

En este artículo nos enfocamos principalmente en los carruseles puestos a disposición por Bootstrap 5 y Glide.js: los más eficientes, fáciles de usar y optimizados.

En cuanto a Bootstrap, antes de que podamos usar cualquier otro componente o este en particular: necesitamos insertar enlaces a la CDN (Content Delivery Network) en nuestro archivo HTML.

Puedes ver en el snippet de código anterior: un enlace al estilo CSS de Bootstrap y uno a su Javascript. Después de insertar el enlace CSS y el script JS podemos copiar el código de los ejemplos de carrusel que Bootstrap pone a disposición.

En la barra izquierda se puede ver el elemento components, y dentro de él, el componente Carrusel.

Puedes elegir, en base a tus exigencias, entre tantos Carousels ya predeterminados. En el ejemplo de arriba, he elegido de reportar el código de un Carousel con los indicadores de dirección.

Con unos pocos pasos y muy pocas líneas de código, tiene un carrusel con controles direccionales completamente funcionales y autoplay ya configurados.

Analizando el código se pueden ver los tag HTML <img> con atributo src, donde se puede ingresar la ruta de las imágenes a mostrar en el Carrusel. Por supuesto, puede agregar más de tres imágenes, simplemente copie todo el bloque div con el tag <img> adentro.

Personalmente, te aconsejo que configures las imágenes como fondo de su div principal (con clase carrusel-item) para obtener una visualización correcta. NB: recuerde establecer una altura mínima, de lo contrario no se mostrará la imagen de fondo. Cuando elegimos usar una imagen como fondo, debemos aplicar reglas CSS específicas para configurar la imagen correctamente.

ESTRUCTURA HTML:

REGLAS CSS:

Además de establecer la altura mínima de nuestro carrusel item, especificamos que la imagen debe mostrarse en su totalidad y debe ocupar todo el espacio disponible. Para hacer esto usamos la propiedad: CSS background-size: cover. La última propiedad (background-repeat: no-repeat) tiene como finalidad no repetir la imagen varias veces.

En cuanto a Glide.js, aquí también se necesita usar enlaces al CDN tanto para el JS a través del tag <script> </script> que inserta al final del body, y para el estilo.

JAVASCRIPT

STYLE

La estructura básica de nuestro carrusel se construye de esta manera. NB: no olvide ingresar el atributo data-glide-el, que es fundamental para su correcto funcionamiento.

Podemos agregar controles direccionales que no están presentes en la estructura que se muestra arriba. Para hacer esto, agregamos este snippet dentro del div con la clase glide__track.

Con respecto a la operación en el lado de JAVASCRIPT, se debe insertar este código en el script. Tienes la posibilidad de insertar múltiples opciones en un objeto js en este caso llamado config, con el objetivo de configurar el Carrusel a tu gusto. NB: no olvide ingresar a la clase .glide y pasar el objeto como parámetro.

Consulta la documentación oficial si tienes dudas o para explorar con más profundidad los carruseles de Bootstrap o Glide.js.

Link Bootstrap: https://getbootstrap.com/docs/5.0/components/carousel/

Link Glide.js: https://glidejs.com/docs/setup/