Generador de carrusel (slider) con CSS scroll-snap

Generador de carrusel (slider) con CSS scroll-snap: para qué sirve

Un carrusel de fotos o tarjetas es común en sitios de comercio, pero las bibliotecas de slider pesan y a veces traban el desplazamiento en el celular.

Este generador usa el scroll-snap de CSS, que encaja cada elemento usando el desplazamiento nativo del navegador: el deslizamiento con el dedo es fluido, funciona con trackpad y teclado y casi no tiene JavaScript. Elige cuántos elementos se ven a la vez en la computadora y en el celular (incluso uno y un pedazo del siguiente, para mostrar que se puede deslizar), el espacio y las esquinas. Sin rotación automática, que dificulta la lectura y la accesibilidad (WCAG 2.2.2).

Cómo usar

1. Pega las direcciones de las imágenes.
2. Elige cuántas se ven a la vez y el espaciado.
3. Copia el código y pégalo en tu sitio.

Cuándo usar

• Vitrina de productos.
• Fotos de trabajos y portafolio.
• Tarjetas de testimonios o servicios.

Preguntas frecuentes

¿Por qué scroll-snap y no una biblioteca?

El scroll-snap usa el desplazamiento nativo del navegador: el deslizamiento en el celular es fluido como en Instagram, funciona con trackpad y teclado y no pesa nada. Las bibliotecas de slider suelen agregar decenas de KB de JavaScript para hacer lo mismo.

¿El carrusel avanza solo?

No, a propósito. Un carrusel que gira solo dificulta la lectura y es un problema de accesibilidad (la WCAG 2.2.2 exige poder pausar lo que se mueve por más de 5 segundos). Quien quiera ver más desliza o usa las flechas.

¿Se puede usar con tarjetas de texto?

Sí. Cambia las imágenes por cualquier contenido dentro de cada elemento de la lista; el tamaño y el ajuste siguen siendo los mismos.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares