React Slidy

Qué es

React Slidy es un componente de slider y carrusel táctil para React creado por midudev. Su objetivo es ofrecer la mejor fluidez y el mejor rendimiento posibles, con especial atención al uso en móvil. Está escrito en JavaScript con estilos en SCSS y se distribuye en npm como react-slidy. Apuesta por una API mínima: pesa alrededor de 1KB gzipped y no arrastra dependencias salvo un polyfill opcional de intersection-observer.

Para qué sirve

• Mostrar un carrusel de imágenes o de cualquier contenido en una app React.
• Construir sliders con buen comportamiento táctil y bloqueo del scroll durante el deslizamiento.
• Añadir navegación por teclado a un carrusel.
• Cargar imágenes de forma diferida (lazy load) dentro del slider.

Cuándo usarlo

Encaja cuando necesitas un slider sencillo y muy ligero, priorizando el rendimiento en dispositivos móviles, sin las opciones (ni el peso) de soluciones más grandes. Su API es deliberadamente reducida, así que si necesitas funciones avanzadas conviene valorar alternativas más completas como Swiper, Embla Carousel o Keen Slider, o hacer un fork.

Ejemplo

Instalación:

npm install react-slidy --save

Uso básico del componente y de sus estilos:

import ReactSlidy from 'react-slidy';
import 'react-slidy/lib/styles.css';

function Galeria() {
  return (
    <ReactSlidy keyboardNavigation>
      <img src="/foto-1.jpg" alt="Foto 1" />
      <img src="/foto-2.jpg" alt="Foto 2" />
      <img src="/foto-3.jpg" alt="Foto 3" />
    </ReactSlidy>
  );
}

Puntos clave

• Muy ligero: en torno a 1KB gzipped y sin dependencias obligatorias.
• Optimizado para móvil, con bloqueo del scroll mientras se desliza.
• Soporta navegación por teclado y carga diferida de contenido.
• Estilos personalizables mediante variables SCSS.
• Licencia MIT.

Ten en cuenta

La API es intencionadamente mínima, por lo que carece de muchas funciones de carruseles más completos. Requiere React 16.8 o superior y prop-types como dependencias de pares. El ritmo de desarrollo es bajo y la última publicación en npm tiene ya varios años, así que conviene revisar su mantenimiento antes de adoptarlo en proyectos nuevos.