Sliders de productos: Navegación, accesibilidad y extracción

Un slider de productos es una fila desplazable horizontalmente de tarjetas de producto que se utiliza para exponer un conjunto pequeño y relacionado sin convertir ese conjunto en el catálogo principal de la página. Debe ayudar a un comprador a continuar un camino de compra definido —como encontrar accesorios compatibles o alternativas comparables— preservando la identidad, el orden y los datos de cada artículo tanto para personas como para máquinas.

Por qué este elemento es importante

Un slider gestiona la atención mostrando algunas opciones en el momento en que se vuelven relevantes. En una página de producto, un comprador que ha entendido el artículo principal puede agradecer los accesorios compatibles. Una cuadrícula completa en ese punto competiría con la compra principal; una fila compacta preserva la decisión original mientras permite la exploración.

Esa ventaja tiene un coste psicológico: cualquier cosa más allá del borde visible es más fácil de pasar por alto. La primera tarjeta recibe más exposición que la séptima, y una tarjeta final recortada puede parecer un error a menos que el diseño indique continuidad. Por lo tanto, un slider debe contener un conjunto secundario, ordenado intencionadamente. No debe ocultar una opción que el lector necesite para entender el precio, la seguridad, la compatibilidad o el propio rango.

La extraíbilidad automática es la capacidad de los motores de búsqueda, asistentes, fuentes y herramientas de contenido para aislar cada producto y mantener sus campos asociados. Una persona puede deslizar para revelar la tarjeta seis; un rastreador puede no ejecutar nunca esa interacción. Cuando las diapositivas posteriores llegan solo después de JavaScript, usan display:none o existen meramente como imágenes de fondo, el sistema ve una colección incompleta. Renderizar cada tarjeta en orden semántico de origen permite que una máquina recupere los mismos nombres, URL, posiciones, precios, monedas y disponibilidad que un comprador puede alcanzar.

Sigue las reglas de redacción de elementos para la precedencia: clasifica el bloque por propósito antes de elegir su apariencia. Si su función es exponer una ruta secundaria de productos, este elemento aplica. Si su función es mostrar resultados completos o permitir una evaluación lado a lado, la cuadrícula o tabla tipada correspondiente tiene prioridad.

Cuándo usarlo

Usa un slider de productos cuando se cumplan todas estas condiciones:

• El conjunto es secundario respecto a la tarea principal de la página.
• Los productos comparten una relación explícita, como accesorios compatibles, alternativas de la misma categoría, artículos vistos recientemente o una lista corta editorial.
• De cuatro a ocho tarjetas concisas proporcionan una amplitud útil sin crear un catálogo oculto.
• El orden se puede explicar mediante relevancia, compatibilidad, clasificación editorial, actualidad u otra regla visible.
• Cada producto sigue siendo comprensible como tarjeta compacta y tiene un destino canónico para obtener información completa.

Un slider supera a una cuadrícula cuando el espacio vertical es limitado y los lectores no necesitan ver todas las opciones simultáneamente. Puede preservar el contexto en una página de detalle de producto, mantener un conjunto breve de recomendaciones unido en móvil y exponer una ruta siguiente sin colocar ocho descripciones completas en el flujo del artículo.

Usa una cuadrícula cuando el conjunto sea el destino. Los resultados de búsqueda, una categoría de producto, una colección filtrada o una colección que deba escanearse completamente necesitan recuentos visibles, ordenación, filtros, paginación y URL estables. Usa una tabla comparativa cuando los lectores deban juzgar las mismas especificaciones entre opciones. Usa una galería de imágenes cuando los artículos sean vistas de un mismo sujeto en lugar de productos comprables separados.

Los errores comunes incluyen una fila de dos artículos forzada en controles de carrusel, una categoría de 30 productos comprimida en un riel, un carrusel de banner principal que contiene promociones en lugar de productos, y un slider usado para ocultar recomendaciones débiles debajo del pliegue. «Visto recientemente» también es un error condicional: solo es útil cuando el visitante tiene historial real, el encabezado dice por qué aparecen esos artículos y un estado vacío no fabrica actividad.

Dónde colocarlo

La colocación debe responder a una pregunta que el lector acaba de formularse. Coloca los accesorios compatibles después de la información de compatibilidad y artículos incluidos, las alternativas después de las limitaciones del producto principal o el resumen de la decisión, y los productos relacionados después de la lista principal de la categoría, no antes. En contenido editorial, coloca el riel después de los criterios y la evidencia, no antes de que los lectores sepan por qué los productos califican.

Mantén el encabezado, la declaración de relación, el recuento de artículos, los controles y las tarjetas en una misma región. Coloca un enlace «Ver todo» junto al encabezado o después de la fila cuando exista una colección completa. El enlace debe dirigir a una página canónica rastreable, no expandir un riel ilimitado del lado del cliente.

No coloques un slider junto a otro slider, un banner rotatorio automático, una tabla de precios o los controles principales de compra de la página. Los gestos horizontales adyacentes crean ambigüedad, mientras que precios en competencia pueden hacer que no quede claro qué oferta compra el CTA principal. No interrumpas pasos procedimentales, una advertencia, términos de pago o divulgación legal obligatoria con recomendaciones. Nunca coloques variantes esenciales dentro de un slider si elegir una cambia el precio, la disponibilidad o la configuración del producto principal; las variantes pertenecen a los controles del producto propietario.

En pantallas pequeñas, permite una tarjeta completa más un vistazo deliberado de la siguiente tarjeta, o una tarjeta completa con una etiqueta de posición explícita. La región puede desplazarse horizontalmente, pero el documento en sí no debe hacerlo. Preserva un camino visible más allá del slider para que un usuario de teclado o táctil nunca quede atrapado en una navegación horizontal repetida.

Anatomía

1. Encabezado de sección: nombra el conjunto, por ejemplo «Accesorios compatibles», en lugar del genérico «También te puede gustar».
2. Declaración de relación: explica por qué los productos califican y si el orden es editorial, conductual o comercial.
3. Recuento de artículos: indica el tamaño finito antes de la interacción, por ejemplo «6 productos».
4. Viewport: recorta solo la presentación; no elimina las tarjetas fuera de pantalla del documento.
5. Tarjeta de producto: preserva el nombre, destino, calificador decisivo y datos comerciales actuales de un producto como una sola unidad.
6. Señal de continuación: usa una tarjeta parcial siguiente, texto de posición o ambos; la sombra sola es demasiado fácil de pasar por alto.
7. Controles anterior y siguiente: usan botones nombrados por su efecto y exponen el estado deshabilitado en los extremos.
8. Indicador de posición: anuncia un rango como «Productos 1–3 de 6», no una fila de puntos sin etiqueta.
9. Ruta Ver todo: abre la colección completa canónica cuando existe.
10. Tratamiento de enfoque: permanece visible en cada control y enlace de tarjeta sin ser recortado por el viewport.

Cada tarjeta sigue el contrato de la tarjeta de producto . El slider posee el significado de la colección y la navegación, no redefine los datos del producto localmente.

Ejemplos de diseño

Lista corta editorial: úsalo para cuatro a ocho productos seleccionados por criterios establecidos. El orden puede representar rango solo cuando la página contiene la evidencia de ese rango; de lo contrario, etiquétalo como «Opciones seleccionadas» y evita afirmaciones ordinales.

Productos relacionados: úsalo para artículos de la misma categoría o sustitutivos después de que se haya explicado el producto principal. Indica la propiedad compartida, como factor de forma o rango de precio, en lugar de implicar personalización.

Accesorios compatibles: úsalo cuando cada artículo tenga una relación verificada con el producto propietario. Repite el modelo o rango compatible en el texto de la tarjeta; la proximidad no es una garantía de compatibilidad.

Historial conductual: úsalo para artículos vistos recientemente o guardados solo cuando el visitante haya creado ese estado. Etiqueta la base, preserva el orden de actualidad, proporciona eliminación cuando corresponda y no emitas historial personalizado en cachés compartidos o datos estructurados.

Parámetros

Una imagen es condicional porque una tarjeta de producto basada en texto puede ser completa sin una. Si se usa, su archivo debe existir, las dimensiones deben reservar espacio y el texto alternativo debe coincidir con su propósito. Si una tarjeta muestra precio o disponibilidad, todos los pares deben mostrar un campo actual equivalente o un estado explícito.

Sintaxis y ejemplos de código

Directiva Markdown portátil

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="View all accessories" viewAllUrl="/accessories/"}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Raises 13–16 inch laptops and leaves the charging ports clear.
::

::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adds seven ports and supports 100 W pass-through charging.
::
:::

Mapeo de shortcode de Hugo

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="View all accessories" viewAllUrl="/accessories/" >}}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Raises 13–16 inch laptops and leaves the charging ports clear.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adds seven ports and supports 100 W pass-through charging.
{{< /product-slide >}}
{{< /product-slider >}}

Esta es la especificación del adaptador previsto, no una invocación de shortcode registrada. Utiliza solo parámetros nombrados. Hasta que exista el adaptador, implementa la colección como HTML semántico o una fila no interactiva sin inventar un shortcode no soportado.

Bloque de WordPress

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"View all accessories","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Compatible desk accessories</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verified for the Arc 14 laptop; four products.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptop stand","url":"/products/arc-stand/","price":"USD 69","availability":"in-stock","qualifier":"Raises 13–16 inch laptops and leaves the charging ports clear."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adds seven ports and supports 100 W pass-through charging."} /-->
<!-- /wp:amicited/product-slider -->

Ejemplos

Bueno: la compatibilidad es explícita

Accesorios verificados para Arc 14 — 4 productos
Soporte para portátil Arc — USD 69 — En stock. Se ajusta a portátiles de 13 a 16 pulgadas; todos los puertos del Arc 14 siguen siendo accesibles.
Hub Dock 7 — USD 89 — En stock. Compatible con la especificación de carga USB-C del Arc 14 y paso de 100 W.
Set de teclado silencioso — USD 74 — Stock bajo. Se conecta por Bluetooth; ningún receptor ocupa un puerto del Arc 14.
Lámpara de escritorio Mini — USD 45 — En stock. Usa una fuente de alimentación USB-C separada; no consume energía del portátil.

Esto funciona porque la relación está nombrada y verificada, cada tarjeta hace una declaración de compatibilidad distintiva, los campos comerciales son paralelos y el recuento finito es visible. Los cuatro artículos pueden existir en el orden de origen incluso cuando solo tres caben en el viewport.

Malo: recomendaciones ocultas sin fundamento

También te puede gustar
MÁS VENDIDO — $69 — Comprar ahora
TENDENCIA — $89 — Comprar ahora
[Tres tarjetas adicionales se cargan después del segundo deslizamiento.]

Esto falla porque el encabezado no explica la relación, «más vendido» y «tendencia» no tienen fuente ni período definidos, la moneda se infiere y las etiquetas repetidas «Comprar ahora» pierden la identidad del producto fuera de contexto. Más grave aún, tres productos no existen hasta la interacción, por lo que un usuario de teclado, un rastreador o un script fallido recibe un conjunto diferente.

Marcado de esquema y accesibilidad

Un slider de productos editorial puede alimentar ItemList cuando su pertenencia y orden son significativos. Usa un ListItem por cada entidad de producto visible, con position, URL canónica y la referencia del producto. Las posiciones deben coincidir con el DOM y el orden visual. No marques el historial personalizado de vistos recientemente como un ItemList público, porque el conjunto no es contenido de página estable.

Cada tarjeta puede alimentar datos de Product y Offer solo cuando la página visible respalde los mismos datos. Un nombre y un destino no justifican precio, calificación, marca, disponibilidad o reseñas inventados. Genera campos visibles y datos estructurados desde la misma fuente de producto aprobada, y omite propiedades volátiles que no puedan mantenerse sincronizadas. No existe un tipo de esquema especial para carrusel.

Usa un <section> nombrado o role="region" solo cuando el encabezado no proporcione ya semántica de punto de referencia suficiente. Representa la colección como una <ul>, <ol> o lista equivalente; cada tarjeta es un elemento de lista. Mantén las tarjetas fuera de pantalla en el DOM y el árbol de accesibilidad. El recorte horizontal es presentación, mientras que display:none, aria-hidden="true", inert o la virtualización solo del lado del cliente hacen que el contenido no esté disponible.

Usa botones nativos para anterior y siguiente. Nómbralos «Productos anteriores» y «Productos siguientes», deshabilítalos correctamente en los extremos y retén el foco después del movimiento. Anuncia «Productos 4–6 de 8» en una región de estado cortés sin mover el foco a la tarjeta recién expuesta. Las teclas de dirección pueden ser una mejora, pero Tab debe alcanzar los controles y enlaces con normalidad. El deslizamiento puede ser compatible, pero nunca como la única entrada.

No avances automáticamente. Respeta las preferencias de movimiento reducido y usa desplazamiento inmediato o controlado. Un enlace de tarjeta necesita un nombre accesible distintivo que contenga el nombre del producto. Evita objetivos de foco duplicados cuando tanto la imagen como el título dirijan a la misma URL. Al 200% de zoom, las tarjetas pueden convertirse en un viewport de una sola tarjeta, pero el texto, los controles y los anillos de foco deben permanecer completos y la página no debe desbordarse horizontalmente.

Reglas de redacción

La redacción debe hacer que la pertenencia sea defendible antes de hacer la fila atractiva.

• Un encabezado específico explica la ruta. Usa de 3 a 10 palabras: «Accesorios compatibles con Arc 14» o «Alternativas por menos de USD 100». Nunca te bases solo en «Más», «Tendencias» o «También te puede gustar».
• Una frase establece la selección. Usa de 8 a 30 palabras para indicar criterios compartidos, audiencia, compatibilidad o fuente del historial. Si el rango o la popularidad determinan el orden, nombra la métrica, el mercado y el período.
• Los conjuntos finitos siguen siendo inspeccionables. Usa normalmente de 4 a 8 productos y no más de 12. Dos o tres tarjetas deben formar una fila estática; los surtidos más grandes necesitan una cuadrícula y una ruta de colección canónica.
• Los nombres de las tarjetas preservan la identidad. Usa el nombre oficial del producto en 1 a 8 palabras. No lo reemplaces por «Mejor valor», «Nuestra elección» o un eslogan de campaña.
• Los calificadores responden a una pregunta de decisión. Usa de 4 a 18 palabras para ajuste, capacidad distintiva, compatibilidad o limitación. Evita elogios genéricos como «calidad premium».
• Los datos paralelos facilitan el escaneo. Si una tarjeta muestra precio, moneda, disponibilidad, calificación o entrega, los pares muestran campos equivalentes o estados de no disponible explícitos de la misma fuente y mercado.
• El orden necesita una base responsable. El orden de compatibilidad puede poner la coincidencia más fuerte primero; el rango requiere criterios publicados; la actualidad refleja el historial del visitante. La colocación pagada debe divulgarse y no puede hacerse pasar por relevancia editorial.
• Las acciones retienen el contexto. Usa «Ver soporte para portátil Arc», no cinco instancias de «Más información». Un CTA de tarjeta abre la página de detalle canónica de ese producto a menos que la acción añada explícitamente una variante conocida a una cesta.
• Las afirmaciones volátiles necesitan propiedad. Los precios, el stock, la entrega, los descuentos, las calificaciones y la popularidad provienen de sistemas aprobados y llevan el comportamiento de frescura requerido. El texto editorial no debe codificar un valor conflictivo.

Nunca coloques reseñas largas, matrices de comparación, selectores de variantes, controles de cantidad, términos de pago, testimonios, temporizadores de cuenta regresiva, ventanas emergentes, reproductores de vídeo o advertencias obligatorias dentro de una diapositiva. No preselecciones complementos, añadas productos a una cesta simplemente navegando ni ocultes la ordenación patrocinada. Un slider previsualiza rutas; el destino o el componente principal adyacente contiene la decisión completa.

Tipos de página que lo usan

El campo postTypes del frontmatter impulsa esta tabla. La inclusión significa que el elemento es condicional cuando un conjunto compacto de productos secundarios mejora la página especificada.

Lista de verificación QA

• El conjunto es secundario respecto a la tarea principal de la página y tiene una relación de producto explícita.
• Una cuadrícula o tabla comparativa no serviría mejor a la tarea real del lector.
• El slider contiene de 4 a 8 productos normalmente y nunca supera los 12.
• El encabezado, la base de selección, el recuento de artículos, los controles, el estado de posición y la ruta Ver todo son visibles cuando corresponda.
• Cada tarjeta tiene un identificador estable, nombre oficial, destino canónico y calificador relevante para la decisión.
• Los campos de precio, moneda, disponibilidad, calificación, entrega y promoción son paralelos y tienen fuente cuando se muestran.
• Las afirmaciones de compatibilidad, clasificación, popularidad, personalización y patrocinio divulgan su base.
• El orden del DOM, el orden visual, la posición anunciada, el orden del teclado y las posiciones de ItemList coinciden.
• Cada producto se renderiza en el servidor y es utilizable sin JavaScript; ninguna diapositiva posterior depende de interacción o una solicitud del cliente.
• Las tarjetas fuera de pantalla permanecen en el árbol de accesibilidad y no están ocultas, inertes o representadas solo por imágenes de fondo.
• Los botones anterior y siguiente tienen nombres distintivos, estados deshabilitados correctos, foco visible y foco estable después del movimiento.
• El deslizamiento táctil y las teclas de dirección son mejoras; los botones estándar y la navegación por Tab proporcionan acceso completo.
• No hay movimiento automático, robo de foco, trampa de teclado ni desbordamiento horizontal a nivel de página.
• Los cambios de posición se anuncian como texto, y el color, recorte, sombras o puntos nunca transmiten la continuación por sí solos.
• Cada ruta de imagen se resuelve antes de la publicación, las dimensiones reservan espacio y el texto alternativo refleja el propósito de la tarjeta.
• Al 200% de zoom y en una pantalla estrecha, una tarjeta, su texto, sus controles y su anillo de foco permanecen completos.
• Los datos estructurados repiten hechos visibles y actuales y omiten el historial personalizado o propiedades comerciales inventadas.
• La colección completa tiene una URL rastreable de Ver todo cuando los lectores necesitan razonablemente navegar más allá del riel.
• Las representaciones en Markdown portátil, Hugo y WordPress preservan los mismos productos, orden, campos y alternativa.

FAQ

La plantilla de la academia renderiza las cinco preguntas revisadas almacenadas en [[faq]] del frontmatter.