¿Alguna vez has construido un slider avanzado para un proyecto? Si es así, es probable que hayas aprovechado alguno de los muchos caruseles de JavaScript disponibles.

Hoy, exploraremos una de las opciones más populares: Swiper.js.

¿Qué es Swiper Slider?

Swiper es un plugin de JavaScript gratuito creado por Vladimir Kharlampidi que te permite crear sliders modernos y responsivos.

Con 38.500 estrellas en GitHub en el momento de escribir esto, se considera uno de los plugins de JavaScript más dominantes. Para comprender mejor sus capacidades, echa un vistazo a las demos disponibles.

See the Pen How to Build a Responsive Slider With Swiper.js by Envato Tuts+ (@tutsplus) on CodePen.

Asegúrese de abrir la demo en una pantalla grande y cambiar el tamaño de la ventana para ver cómo cambia el diseño de la página.

See the Pen How to Build a Responsive Slider With Swiper.js and a Custom Cursor by Envato Tuts+ (@tutsplus) on CodePen.

Swiper no solo está disponible para su uso con JavaScript puro. Si planeas construir una aplicación con uno de los populares frameworks de JavaScript (por ejemplo, React) y necesitas un slider, considera utilizar el componente Swiper integrado asociado.

Comenzando con Swiper

Para empezar con Swiper, comienza descargando e instalando los siguientes archivos en tu proyecto:

swiper-bundle.css o su versión minificada

swiper-bundle.js o su versión minificada

Puedes obtener una copia de estos archivos de Swiper visitando el repositorio en GitHub, utilizando un gestor de paquetes (por ejemplo, npm) o cargando los activos necesarios a través de un CDN (por ejemplo, cdnjs). Para este tutorial, elegiré la última opción.

Para este tutorial, además de los archivos de Swiper, también he incorporado el archivo CSS de Bootstrap 5.

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js
https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css

Teniendo esto en cuenta, si miras bajo la pestaña de Configuración de nuestra demostración, verás que hay dos archivos CSS externos y un archivo JavaScript externo.

DEMO CODE 
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>

Extra: Cursor Personalizado

Ahora vamos a agregar un cursor personalizado a nuestra demo cada vez que se pase el ratón sobre un slider. Utilizaremos eventos pointermove para detectar el elemento sobre el que se pasa el cursor y mostraremos el cursor solo si el dispositivo permite el hover. El cursor será un elemento de posición fija y se actualizará según la posición actual del puntero del ratón. Además, anularemos los estilos de las flechas del slider para que el cursor desaparezca cuando se pase sobre ellas.

1. HTML

Primero, agregaremos el marcado del cursor:

<div class="cursor">
  <img width="40" height="42" src="cursor-swipe.svg" alt="swipe indicator">
</div>

2. CSS

Luego, continuaremos con los estilos limitándolos solo a dispositivos compatibles con el desplazamiento:

@media (hover: hover) {
  .section-with-carousel .carousel-wrapper {
    cursor: none;
  }
  
  .section-with-carousel .carousel-controls .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }
  .section-with-carousel .carousel-controls .carousel-control-left {
    left: 50px;
  }
  .section-with-carousel .carousel-controls .carousel-control-right {
    right: 50px;
  }
  .cursor {
    position: fixed;
    left: var(--cursor-x);
    top: var(--cursor-y);
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: black;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
  }
  body.show-custom-cursor .cursor {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

2. JSS

Terminaremos con el código JavaScript requerido:

const cursor = document.querySelector(".cursor");
const body = document.body;
const toggleClass = "show-custom-cursor";
function pointermoveHandler(e) {
  const target = e.target;
  if (
    e.target.closest(".carousel-wrapper") &&
    window.matchMedia("(hover: hover)").matches
  ) {
    body.classList.add(toggleClass);
    cursor.style.setProperty("--cursor-x", `${e.clientX}px`);
    cursor.style.setProperty("--cursor-y", `${e.clientY}px`);
  } else {
    body.classList.remove(toggleClass);
  }
}
document.addEventListener("pointermove", pointermoveHandler);

Conclusión

En este tutorial, creamos un diseño de página asimétrico utilizando Swiper.js y unas pocas líneas de JavaScript.

Sin embargo, solo hemos explorado lo más básico de este plugin. Hay infinitas posibilidades para aplicar estas ideas y construir sliders más avanzados. Inspírate en lugares como Dribbble y sigue practicando. ¡Es la mejor manera de expandir tus habilidades!

Ampliar Info: tutsplus