¿Qué es Glider.js y cómo utilizarlo?

Glider.js es una librería de JavaScript ligera, flexible y sin dependencias, diseñada para crear carruseles y sliders optimizados y responsivos. Es ideal para proyectos que buscan rendimiento y personalización sin el peso de librerías como jQuery.

A continuación, te mostramos una guía paso a paso para entender y usar Glider.js en tu proyecto.

Paso 1: Instalación de Glider.js

Opción 1: Usar un CDN

Incluye los archivos directamente desde un CDN en tu proyecto:

				
					<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js/glider.min.css"> <script defer src="https://cdn.jsdelivr.net/npm/glider-js/glider.min.js"></script>

Opción 2: Usar npm

Si utilizas un gestor de paquetes como npm, instala la librería ejecutando:

				
					npm install glider-js

Luego, importa los archivos en tu proyecto:

				
					import 'glider-js/glider.min.css';
import Glider from 'glider-js';

Paso 2: Crear la estructura HTML

Define la estructura básica del carrusel. Asegúrate de incluir un contenedor principal y los elementos del carrusel dentro de él.

				
					<div class="glider-contain">
  <div class="glider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
  </div>
  <button class="glider-prev">«</button>
  <button class="glider-next">»</button>
</div>

.glider: Contenedor de los elementos del carrusel.
.glider-prev y .glider-next: Botones de navegación opcionales.

Paso 3: Configurar Glider.js con JavaScript

Inicializa el carrusel en tu archivo JavaScript. Personaliza las opciones según las necesidades de tu proyecto.

				
					document.addEventListener('DOMContentLoaded', function () {
  new Glider(document.querySelector('.glider'), {
    slidesToShow: 3, // Número de elementos visibles
    slidesToScroll: 1, // Número de elementos que se desplazan por interacción
    draggable: true, // Permitir arrastre táctil
    arrows: {
      prev: '.glider-prev', // Selector del botón anterior
      next: '.glider-next', // Selector del botón siguiente
    },
  });
});

Paso 4: Configuración responsive

Glider.js permite adaptar el carrusel a distintos tamaños de pantalla con la opción responsive. Define diferentes configuraciones según los puntos de quiebre deseados:

				
					new Glider(document.querySelector('.glider'), {
  slidesToShow: 1,
  draggable: true,
  responsive: [
    {
      breakpoint: 576, // Pantallas mayores a 576px
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 768, // Pantallas mayores a 768px
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      },
    },
  ],
});

Paso 5: Personalizar estilos con CSS

Dale un diseño único a tu carrusel utilizando estilos personalizados. Aquí tienes un ejemplo básico:

				
					.glider {
  display: flex;
  overflow: hidden;
  gap: 10px;
}

.glider-contain {
  position: relative;
}

.glider-prev, .glider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.glider-prev {
  left: 10px;
}

.glider-next {
  right: 10px;
}

Paso 6: Añadir funciones avanzadas

1. Scroll automático

Glider.js no tiene autoplay incorporado, pero puedes implementarlo fácilmente con un temporizador:

				
					let glider = new Glider(document.querySelector('.glider'), {
  slidesToShow: 3,
  draggable: true,
});

setInterval(() => {
  glider.scrollItem('next');
}, 3000); // Cambia cada 3 segundos

2. Indicadores de página (dots)

Si deseas añadir indicadores de página, usa un contenedor de dots en tu HTML:

				
					<div class="dots"></div>

Y configúralo en JavaScript:

				
					new Glider(document.querySelector('.glider'), {
  slidesToShow: 3,
  draggable: true,
  dots: '.dots', // Selector de los indicadores
});

Ejemplo completo:

				
					<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo con Glider.js</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js/glider.min.css">
  
</head>
<body>
  <div class="glider-contain">
    <div class="glider">
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
      <div>Slide 4</div>
    </div>
    <button class="glider-prev">«</button>
    <button class="glider-next">»</button>
  </div> <script defer src="https://cdn.jsdelivr.net/npm/glider-js/glider.min.js"></script> <script defer src="data:text/javascript;base64,ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsZnVuY3Rpb24oKXtuZXcgR2xpZGVyKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5nbGlkZXInKSx7c2xpZGVzVG9TaG93OjMsc2xpZGVzVG9TY3JvbGw6MSxkcmFnZ2FibGU6dHJ1ZSxhcnJvd3M6e3ByZXY6Jy5nbGlkZXItcHJldicsbmV4dDonLmdsaWRlci1uZXh0Jyx9LH0pO30pOw=="></script> </body>
</html>

Guía práctica: ¿Qué es Glider.js y cómo utilizarlo?