Guía de referencia

Tipos de slider y sus medidas

20 tipos de slider, 15 para web y 5 para aplicaciones móviles. Cada uno tiene su vista previa en movimiento, sus características y una ficha de medidas lista para diseñar.

Las medidas son rangos recomendados por la práctica profesional y las guías de Google, Apple y la W3C, no una norma única. Ajústalas a tu diseño.

Antes de medir

¿Por qué no se mide en centímetros?

Una pantalla no tiene un tamaño fijo. El mismo diseño se ve en un celular de 6 pulgadas y en un monitor de 27. Por eso cada plataforma usa su propia unidad, que se adapta a la densidad de la pantalla.

Píxel CSS

La unidad de la web. Es un píxel "lógico": en un celular moderno, 1 px CSS equivale a 2 o 3 píxeles físicos.

Density-independent pixel

La unidad de Android. 1 dp = 1 píxel físico en una pantalla de 160 ppp. Fórmula: px = dp × (ppp ÷ 160).

Punto de iOS

La unidad de iPhone y iPad. Se exporta a @2x y @3x: un botón de 44 pt se exporta a 88 o 132 px.

Centímetro

Para impresión. En CSS existe (1 cm = 37,8 px), pero no garantiza que mida un centímetro real en la pantalla.

Cómo se exporta una imagen para cada pantalla

Plataforma	Escala	Un elemento de 100 de ancho se exporta a
Web (pantalla normal)	1×	100 px
Web (retina / celular)	2×	200 px
Android mdpi / hdpi / xhdpi	1× / 1,5× / 2×	100 / 150 / 200 px
Android xxhdpi / xxxhdpi	3× / 4×	300 / 400 px
iOS @2x / @3x	2× / 3×	200 / 300 px

Tamaños mínimos para tocar o hacer clic

Las flechas, puntos y manijas de un slider son botones. Sus mínimos son: 24 × 24 px en web (WCAG 2.2, nivel AA), 48 × 48 dp en Android y 44 × 44 pt en iOS. El punto visible puede ser más pequeño; lo que debe cumplir el mínimo es el área que responde al toque.

Además, la WCAG pide que todo lo que se mueva solo por más de 5 segundos se pueda pausar o detener.

Tamaño real

El mismo slider en cuatro pantallas, a escala

Estas cuatro pantallas están dibujadas en proporción a su ancho físico real. Así se entiende por qué un slider no se diseña en centímetros.

**Monitor 24″**1920 px de ancho ≈ **53 cm**

Pantalla	Resolución lógica	Ancho físico aprox.	1 cm equivale a
Celular 6,1″ (iPhone 15)	390 × 844 pt	6,5 cm	≈ 60 pt
Celular Android 6,5″	360–412 × 800–915 dp	6,8 cm	≈ 53–60 dp
Tablet 10,9″ (iPad Air)	820 × 1180 pt	15,8 cm	≈ 52 pt
Portátil 14″ Full HD	1920 × 1080 px*	31 cm	≈ 62 px*
Monitor 24″ Full HD	1920 × 1080 px	53 cm	≈ 36 px

* Muchos portátiles usan escalado de 125% o 150% en Windows, así que la página se ve como si tuviera 1536 o 1280 px de ancho. Los valores en cm son aproximados.

Catálogo

Los 20 tipos de slider

Web Tipo 01

Cabecera (hero)

La primera franja del sitio: imagen grande, título, una frase y un botón. Es el slider más usado.

3 a 5 diapositivas, cada una con un solo mensaje
Texto real sobre la imagen (no texto dentro de la foto)
Capa oscura o degradado para que el texto se lea

Escritorio	100% de ancho × 500–700 px de alto. Contenido de texto con máx. 1.200 px
Celular (web)	100% × 420–560 px. Texto abajo, botón ancho completo
App	No se usa igual: su equivalente es el banner (ver tipo 17)
Imagen a exportar	1920 × 800 px (escritorio) y 828 × 1100 px (celular), WebP
Peso	Máx. 250 KB por imagen
Tiempo	5–7 s por slide, con pausa

Cuidado: Si el texto viene "quemado" dentro de la imagen, Google no lo lee y en celular queda diminuto.

Web Tipo 02

Ancho completo (full width)

Toca los dos bordes de la ventana, pero no ocupa todo el alto. Deja ver que hay más contenido abajo.

La imagen se estira al 100%, el texto no
Altura fija o proporcional al ancho
Funciona como cabecera o como sección intermedia

Escritorio	100% × 500–600 px. Base recomendada por Smart Slider: 1.200 × 500–600 px de contenido
Celular (web)	100% × 300–450 px
App	Equivale a un banner de borde a borde: 360–430 dp/pt × 180–240
Imagen a exportar	1920 × 700 px; 2560 px de ancho si tu público usa monitores 2K
Peso	Máx. 250 KB
Tiempo	5–7 s

Cuidado: En monitores muy anchos la imagen se recorta arriba y abajo: deja el motivo principal en el centro.

Web Tipo 03

En caja (boxed)

Respeta los márgenes de la página. Es más discreto y combina con sitios de contenido.

Mismo ancho que el resto del contenido
Esquinas redondeadas y sombra suave
Más fácil de leer en pantallas grandes

Escritorio	1.140–1.200 px × 400–500 px, radio 8–16 px
Celular (web)	Ancho − 32 px (16 por lado) × 220–300 px
App	Ancho − 32 dp × relación 16:9 (ej. 328 × 184 dp)
Imagen a exportar	2400 × 1000 px (el doble de 1200 × 500 para pantallas retina)
Peso	Máx. 200 KB
Tiempo	5–7 s

Cuidado: Exporta al doble del tamaño en que se muestra; si no, se ve borroso en celulares y Mac.

Web Tipo 04

Pantalla completa (fullscreen)

Ocupa todo el ancho y todo el alto de la ventana. Experiencia inmersiva, ideal para turismo, eventos o portafolios.

Altura = alto de la pantalla
Indicador de "desliza hacia abajo"
Un mensaje muy corto y centrado

Escritorio	100vw × 100vh (todo el navegador)
Celular (web)	100vw × 100svh. Usa svh o dvh: 100vh queda tapado por la barra del navegador
App	Pantalla completa: 390 × 844 pt (iPhone) / 360 × 800 dp (Android)
Imagen a exportar	1920 × 1080 px horizontal + 1080 × 1920 px vertical para celular
Peso	Máx. 300 KB
Tiempo	6–8 s

Cuidado: Esconde todo lo demás. Si el visitante no entiende que debe bajar, se va.

Web Tipo 05

Carrusel de productos (multi-item)

Muestra varias tarjetas a la vez y avanza de a una. Típico de tiendas en línea.

Varias tarjetas visibles, el resto se asoma
Navegación por flechas, arrastre y teclado
Sin autoplay: el usuario compara a su ritmo

Escritorio	Tarjeta de 260–300 px, 4 visibles, espacio de 16–24 px
Celular (web)	1,2–1,5 tarjetas visibles (la siguiente se asoma)
App	Tarjeta de 140–160 dp/pt, 2 visibles + asomo
Imagen a exportar	800 × 800 px (1:1), mismo fondo en todas
Peso	Máx. 80 KB por foto
Tiempo	Manual

Cuidado: Si todas las fotos no tienen la misma proporción, las tarjetas quedan de alturas distintas.

Web Tipo 06

Carrusel de publicaciones

Toma las últimas noticias o entradas del blog. En WordPress se puede llenar solo.

Imagen + fecha + título + resumen
Título limitado a 2 líneas
Enlace a la publicación completa

Escritorio	Tarjeta de 360–400 px, 3 visibles
Celular (web)	1 tarjeta + asomo (80–85% del ancho)
App	Tarjeta 280–300 dp/pt, 1 + asomo
Imagen a exportar	1200 × 675 px (16:9)
Peso	Máx. 120 KB
Tiempo	Manual o 6–8 s

Cuidado: Una publicación sin imagen destacada rompe la fila: define una imagen por defecto.

Web Tipo 07

Carrusel de logos (marquesina)

Logos de clientes o aliados desplazándose sin fin. Es prueba social.

Movimiento continuo y lento
Logos en gris para que ninguno grite más que otro
Se pausa al pasar el mouse

Escritorio	Logo de 40–60 px de alto, máx. 140–180 px de ancho, separación 48–64 px
Celular (web)	Logo de 32–40 px de alto
App	Poco común; si se usa, 32 dp de alto
Imagen a exportar	SVG (vectorial). Si es PNG: 360 × 120 px con fondo transparente
Peso	SVG < 10 KB
Tiempo	Velocidad de 30–60 px por segundo

Cuidado: Solo muestra logos de quien de verdad trabajó contigo y con su permiso.

Web Tipo 08

Testimonios

Opiniones de clientes con nombre, foto y cargo, una a la vez.

Frase corta y concreta
Foto, nombre y empresa reales
Comillas o estrellas como señal visual

Escritorio	Tarjeta de máx. 720 px de ancho (o 3 tarjetas de 360 px)
Celular (web)	Ancho − 32 px
App	Ancho − 32 dp
Imagen a exportar	Avatar 192 × 192 px, se muestra a 64–96 px
Peso	Máx. 30 KB por avatar
Tiempo	Mín. 8 s o manual (hay que leer)

Cuidado: Inventar testimonios es engaño al consumidor. Úsalos solo con autorización de la persona.

Web Tipo 09

Galería con miniaturas

Una imagen grande y una fila de miniaturas debajo para saltar directo a cualquiera.

Miniatura activa resaltada
Clic en la grande para ampliar (lightbox)
Ideal para fichas de producto

Escritorio	Principal hasta 600–800 px; miniaturas de 80–120 px, 4–6 visibles
Celular (web)	Principal al 100%; miniaturas de 56–64 px o cambiarlas por puntos
App	Pager a pantalla completa + miniaturas de 56–64 dp
Imagen a exportar	Principal 1200 × 1200 px; miniatura 240 × 240 px
Peso	Principal máx. 150 KB
Tiempo	Manual

Cuidado: Carga las miniaturas como archivos pequeños aparte, no la imagen grande reducida.

Web Tipo 10

Slider vertical

Las diapositivas suben y bajan, con puntos al costado.

Puntos de navegación verticales
Combina bien con texto a un lado
Se siente parecido al scroll

Escritorio	Alto 500–700 px; puntos de 8–12 px con área de clic ≥ 24 px
Celular (web)	Mejor convertirlo a horizontal: choca con el scroll de la página
App	Solo a pantalla completa (estilo reels)
Imagen a exportar	1200 × 1500 px (4:5)
Peso	Máx. 200 KB
Tiempo	5–7 s

Cuidado: En celular, si el dedo mueve el slider en vez de la página, el usuario queda atrapado.

Web Tipo 11

Vitrina de producto (showcase)

Un solo producto protagonista por diapositiva, con una animación sutil.

Producto recortado, sin fondo
Pulso o giro leve (3–5% de escala)
Texto y botón de compra al lado

Escritorio	Alto 500–600 px; producto ocupa 40–50% del ancho
Celular (web)	Producto arriba, texto abajo
App	Producto a 240–280 dp/pt de ancho
Imagen a exportar	1000 × 1000 px PNG o WebP con fondo transparente
Peso	Máx. 150 KB
Tiempo	6–8 s

Cuidado: Una animación exagerada distrae del producto. Si se nota mucho, es demasiado.

Web Tipo 12

Antes y después (comparación)

Dos imágenes superpuestas y una manija que se arrastra para comparar.

Las dos fotos con el mismo encuadre exacto
Manija visible en el centro
Etiquetas "Antes" y "Después"

Escritorio	Relación fija 16:9 o 4:3, hasta 1.000 px de ancho
Celular (web)	100% del ancho; manija táctil ≥ 44 px
App	Ancho completo; manija ≥ 48 dp (Android) / 44 pt (iOS)
Imagen a exportar	Ambas de 1600 × 900 px, idénticas en tamaño
Peso	Máx. 200 KB cada una
Tiempo	Manual

Cuidado: Si las fotos no están alineadas, la comparación no demuestra nada.

Web Tipo 13

Efectos 3D (coverflow, cubo, cartas)

La diapositiva central al frente y las laterales giradas o reducidas, como un estante.

Sensación de profundidad
Muy visual para portafolios y álbumes
Librerías como Swiper ya lo traen

Escritorio	Slide central de 300–400 px; laterales al 70–85%
Celular (web)	Slide central al 70% del ancho
App	Slide central de 240–280 dp/pt
Imagen a exportar	800 × 1000 px (4:5)
Peso	Máx. 120 KB
Tiempo	Manual o 5 s

Cuidado: Gasta más batería y procesador. Desactívalo si el usuario pidió reducir el movimiento.

Web Tipo 14

Con video de fondo

Un video corto en bucle reemplaza la imagen de fondo.

Sin sonido y en bucle
Imagen póster mientras carga
Texto encima con capa oscura

Escritorio	100% × 500–700 px o pantalla completa
Celular (web)	Muestra la imagen póster en lugar del video para ahorrar datos
App	Video de 1080 × 1920 en onboarding o historias
Imagen a exportar	Video 1920 × 1080, MP4 (H.264) y WebM, 10–20 s
Peso	Máx. 3–5 MB el video
Tiempo	Bucle continuo

Cuidado: El video que suena solo o que pesa 30 MB espanta visitantes.

Web Tipo 15

Landing page / grupo de sliders

Varias secciones tipo slider apiladas forman una página de una sola sección con menú de anclas.

Cada sección es un bloque visual
Menú que salta a cada bloque
Útil para eventos, campañas y lanzamientos

Escritorio	Cada bloque 100% × 500–900 px
Celular (web)	Bloques apilados de alto automático
App	No aplica: en app son pantallas separadas
Imagen a exportar	Según el tipo de cada bloque
Peso	Total de la página ideal < 2 MB
Tiempo	Según cada bloque

Cuidado: Muchos sliders en una página multiplican el peso. Mide la velocidad con PageSpeed Insights.

App Tipo 16

Onboarding (bienvenida)

Las 3 a 5 pantallas que explican la app la primera vez que se abre.

Una idea por pantalla con ilustración
Indicador de página (puntos)
Botón "Omitir" siempre visible

Escritorio	No aplica
Celular (web)	No aplica (en web se usa un tour guiado)
App	Pantalla completa: iOS 390 × 844 pt / Android 360 × 800 dp. Ilustración de 240–300 pt/dp
Imagen a exportar	iOS @3x: 1170 × 2532 px. Android xxhdpi: 1080 × 2400 px. Ilustraciones en SVG o PDF vectorial
Peso	Máx. 150 KB por ilustración
Tiempo	Nunca automático

Cuidado: Si no se puede omitir, el usuario lo siente como un obstáculo y desinstala.

App Tipo 17

Banner promocional en app

Las promociones que pasan arriba en apps de domicilios, bancos y tiendas.

Margen a los lados y esquinas redondeadas
Se asoma el siguiente banner
Pausa cuando el usuario lo toca

Escritorio	En web equivale al boxed
Celular (web)	Ancho − 32 px × relación 2:1
App	Ancho − 32 dp (16 por lado): en 360 dp queda de 328 × 164 dp; radio 12–16 dp
Imagen a exportar	1080 × 540 px (2:1). En iOS @3x: 1074 × 537 px
Peso	Máx. 100 KB
Tiempo	4–5 s, pausa al tocar

Cuidado: Deja libre un 10% de cada borde: algunos teléfonos recortan las esquinas.

App Tipo 18

Historias (stories)

Formato vertical de pantalla completa con barras de progreso arriba, como Instagram o WhatsApp.

Barras segmentadas de progreso
Tocar a la derecha avanza, a la izquierda retrocede
Mantener presionado pausa

Escritorio	Se muestra centrado en una columna de 9:16
Celular (web)	Pantalla completa 9:16
App	Pantalla completa 9:16 (360 × 640 dp de zona útil)
Imagen a exportar	1080 × 1920 px. Deja libres unos 250 px arriba y abajo (zona segura)
Peso	Imagen máx. 300 KB; video 15 s máx. 4 MB
Tiempo	5–7 s por historia

Cuidado: Lo que pongas en los 250 px de arriba queda tapado por las barras y el nombre.

App Tipo 19

Galería de producto en app (pager)

Fotos de un producto que se deslizan con el dedo, con contador "1/5".

Deslizar con el dedo, sin flechas
Contador o puntos
Pellizcar para hacer zoom

Escritorio	Equivale a la galería con miniaturas
Celular (web)	100% de ancho, 1:1 o 4:5
App	Ancho completo: 360–430 dp/pt, alto igual (1:1) o 1,25 veces (4:5)
Imagen a exportar	1080 × 1080 px (1:1) o 1080 × 1350 px (4:5)
Peso	Máx. 150 KB
Tiempo	Manual

Cuidado: Mezclar fotos 1:1 y 4:5 hace saltar el contenido de abajo.

App Tipo 20

Control deslizante (range slider)

Ojo: en apps y formularios "slider" también es el control para elegir un valor (volumen, precio, brillo). No es un carrusel.

Una barra (track) y una manija (thumb)
Muestra el valor elegido
Puede tener uno o dos extremos (rango de precios)

Escritorio	Web: <input type="range">, área de clic mín. 24 × 24 px (WCAG 2.2 AA), mejor 44 px
Celular (web)	Manija con área táctil ≥ 44 px
App	Área táctil mín. 48 × 48 dp (Android) / 44 × 44 pt (iOS)
Imagen a exportar	No lleva imágenes
Peso	—
Tiempo	—

Cuidado: Muchos estudiantes buscan "slider" y encuentran este control. Conviene aclararlo desde el principio.

Para imprimir o copiar

Tabla resumen de medidas

Tipo	Web escritorio	App	Imagen a exportar
01. Cabecera (hero)	100% de ancho × 500–700 px de alto. Contenido de texto con máx. 1.200 px	No se usa igual: su equivalente es el banner (ver tipo 17)	1920 × 800 px (escritorio) y 828 × 1100 px (celular), WebP
02. Ancho completo (full width)	100% × 500–600 px. Base recomendada por Smart Slider: 1.200 × 500–600 px de contenido	Equivale a un banner de borde a borde: 360–430 dp/pt × 180–240	1920 × 700 px; 2560 px de ancho si tu público usa monitores 2K
03. En caja (boxed)	1.140–1.200 px × 400–500 px, radio 8–16 px	Ancho − 32 dp × relación 16:9 (ej. 328 × 184 dp)	2400 × 1000 px (el doble de 1200 × 500 para pantallas retina)
04. Pantalla completa (fullscreen)	100vw × 100vh (todo el navegador)	Pantalla completa: 390 × 844 pt (iPhone) / 360 × 800 dp (Android)	1920 × 1080 px horizontal + 1080 × 1920 px vertical para celular
05. Carrusel de productos (multi-item)	Tarjeta de 260–300 px, 4 visibles, espacio de 16–24 px	Tarjeta de 140–160 dp/pt, 2 visibles + asomo	800 × 800 px (1:1), mismo fondo en todas
06. Carrusel de publicaciones	Tarjeta de 360–400 px, 3 visibles	Tarjeta 280–300 dp/pt, 1 + asomo	1200 × 675 px (16:9)
07. Carrusel de logos (marquesina)	Logo de 40–60 px de alto, máx. 140–180 px de ancho, separación 48–64 px	Poco común; si se usa, 32 dp de alto	SVG (vectorial). Si es PNG: 360 × 120 px con fondo transparente
08. Testimonios	Tarjeta de máx. 720 px de ancho (o 3 tarjetas de 360 px)	Ancho − 32 dp	Avatar 192 × 192 px, se muestra a 64–96 px
09. Galería con miniaturas	Principal hasta 600–800 px; miniaturas de 80–120 px, 4–6 visibles	Pager a pantalla completa + miniaturas de 56–64 dp	Principal 1200 × 1200 px; miniatura 240 × 240 px
10. Slider vertical	Alto 500–700 px; puntos de 8–12 px con área de clic ≥ 24 px	Solo a pantalla completa (estilo reels)	1200 × 1500 px (4:5)
11. Vitrina de producto (showcase)	Alto 500–600 px; producto ocupa 40–50% del ancho	Producto a 240–280 dp/pt de ancho	1000 × 1000 px PNG o WebP con fondo transparente
12. Antes y después (comparación)	Relación fija 16:9 o 4:3, hasta 1.000 px de ancho	Ancho completo; manija ≥ 48 dp (Android) / 44 pt (iOS)	Ambas de 1600 × 900 px, idénticas en tamaño
13. Efectos 3D (coverflow, cubo, cartas)	Slide central de 300–400 px; laterales al 70–85%	Slide central de 240–280 dp/pt	800 × 1000 px (4:5)
14. Con video de fondo	100% × 500–700 px o pantalla completa	Video de 1080 × 1920 en onboarding o historias	Video 1920 × 1080, MP4 (H.264) y WebM, 10–20 s
15. Landing page / grupo de sliders	Cada bloque 100% × 500–900 px	No aplica: en app son pantallas separadas	Según el tipo de cada bloque
16. Onboarding (bienvenida)	No aplica	Pantalla completa: iOS 390 × 844 pt / Android 360 × 800 dp. Ilustración de 240–300 pt/dp	iOS @3x: 1170 × 2532 px. Android xxhdpi: 1080 × 2400 px. Ilustraciones en SVG o PDF vectorial
17. Banner promocional en app	En web equivale al boxed	Ancho − 32 dp (16 por lado): en 360 dp queda de 328 × 164 dp; radio 12–16 dp	1080 × 540 px (2:1). En iOS @3x: 1074 × 537 px
18. Historias (stories)	Se muestra centrado en una columna de 9:16	Pantalla completa 9:16 (360 × 640 dp de zona útil)	1080 × 1920 px. Deja libres unos 250 px arriba y abajo (zona segura)
19. Galería de producto en app (pager)	Equivale a la galería con miniaturas	Ancho completo: 360–430 dp/pt, alto igual (1:1) o 1,25 veces (4:5)	1080 × 1080 px (1:1) o 1080 × 1350 px (4:5)
20. Control deslizante (range slider)	Web: <input type="range">, área de clic mín. 24 × 24 px (WCAG 2.2 AA), mejor 44 px	Área táctil mín. 48 × 48 dp (Android) / 44 × 44 pt (iOS)	No lleva imágenes

Referencias

Fuentes de las medidas

Las imágenes de esta página fueron generadas con inteligencia artificial en Canva para uso educativo.