Introducción · Páginas Web

Demostración

Esta es la demo 1: un carrusel de ancho completo con flechas, puntos, pausa al pasar el mouse, teclado y deslizamiento con el dedo.

Montañas cafeteras al amanecer con neblina

Demo 1 · Slider de ancho completo

Un slider bien hecho cuenta una historia en segundos

Esta cabecera es un slider real. Pasa el mouse encima para pausarlo, usa las flechas del teclado o desliza con el dedo.

Empezar a aprender

Ciudad latinoamericana al atardecer con montañas al fondo

Demo 1 · Slide 2

Una idea por diapositiva

Cada slide debe tener un solo mensaje y una sola acción. Si necesitas tres mensajes, quizás necesitas tres secciones.

Ver tipos de slider

Playa tropical con palmeras al atardecer

Demo 1 · Slide 3

Constrúyelo tú mismo

Al final de la página está el tutorial paso a paso: primero solo HTML y CSS, después con JavaScript.

Ir al tutorial

¿Qué es un slider?

Un slider (también llamado carrusel o presentación de diapositivas) es un componente web que muestra varios contenidos en el mismo espacio, uno después de otro. Ahorra espacio en pantalla y pone al frente lo más importante.

Los sliders de hace diez años eran solo imágenes que giraban. Hoy un slider puede llevar video de fondo, textos animados, botones de llamado a la acción, logos de clientes o publicaciones de un blog que se actualizan solas.

Anatomía de un slider

Contenedor (viewport): la "ventana" visible. Tiene overflow: hidden para ocultar lo que queda por fuera.
Pista (track): la fila donde van todas las diapositivas una al lado de la otra. Es la que se mueve.
Diapositivas (slides): cada pantalla de contenido: imagen, texto, botón.
Navegación: flechas, puntos (bullets), miniaturas, arrastre con el dedo o teclado.
Capas (layers): los elementos encima de la imagen: títulos, botones, formas.

Dos cosas distintas con el mismo nombre

En diseño web, slider casi siempre significa carrusel: diapositivas que pasan una tras otra. En Material Design y en los formularios, Slider es el control para elegir un valor arrastrando una manija (volumen, precio). Esta guía cubre los dos: los carruseles en la sección Carruseles y el control en Slider de valor.

¿Conviene usar un slider?

Los tres artículos de referencia son del blog de Smart Slider 3, que vende un plugin de sliders. Es natural que defiendan su uso. Un buen diseñador escucha también a la otra parte.

A favor

Muestra varios mensajes en poco espacio.
Da dinamismo y una imagen moderna.
Los sliders actuales son accesibles, rápidos y responsivos si se configuran bien.

En contra

Muchos usuarios solo ven la primera diapositiva; el resto pasa desapercibido.
El movimiento automático puede molestar y dificulta leer, sobre todo a personas con discapacidad visual o cognitiva.
Varias imágenes grandes hacen más lenta la carga de la página.

Regla práctica

Pon el mensaje más importante en la primera diapositiva, usa entre 3 y 5 slides como máximo, deja que el usuario pause, carga las imágenes en diferido (loading="lazy") y comprímelas. Si solo tienes un mensaje, no necesitas slider: usa una imagen fija.

Secciones de esta guía

Tipos de carrusel

Cabecera, productos, logos, testimonios y más, con vista previa animada.

1920px

Tipos y medidas

20 tipos con medidas en px, dp y pt para web y app.

Botones

Texto, delineado, relleno, toggle y otros 11 tipos.

Botón de acción flotante

Normal, mini, extendido y expandible.

ChipActivo

Chips

Entrada, elección, filtro y acción.

Slider de valor

Continuo, discreto y de rango.

</>

Cómo hacer un slider

Paso a paso en HTML y CSS, con video.

Los 40 componentes

Los marcados con M3 son de Material 3. Cada componente tiene su página con uso, principios, tipos, anatomía, una demostración automática, medidas y accesibilidad.

Fuentes

Los textos de esta página son explicaciones propias basadas en esas fuentes. Las imágenes fueron generadas con inteligencia artificial en Canva para fines educativos: no muestran lugares, productos ni personas reales.