Sliders de Produtos: Navegação, Acessibilidade e Extração

Um slider de produtos é uma fileira de cartões de produtos com rolagem horizontal usada para expor um conjunto pequeno e relacionado sem transformar esse conjunto no catálogo principal da página. Ele deve ajudar um comprador a continuar um caminho de compra definido — como encontrar acessórios compatíveis ou alternativas comparáveis — preservando a identidade, ordem e fatos de cada item para pessoas e máquinas.

Por que este elemento é importante

Um slider gerencia a atenção mostrando algumas escolhas no momento em que se tornam relevantes. Em uma página de produto, um comprador que entendeu o item principal pode apreciar acessórios compatíveis. Uma grade completa nesse ponto competiria com a compra principal; uma fileira compacta preserva a decisão original enquanto permite exploração.

Essa vantagem tem um custo psicológico: qualquer coisa além da borda visível é mais fácil de ignorar. O primeiro cartão recebe mais exposição que o sétimo, e um cartão final cortado pode parecer um erro a menos que o design sinalize continuidade. Um slider deve, portanto, conter um conjunto secundário intencionalmente ordenado. Ele não deve esconder uma escolha que o leitor precisa para entender preço, segurança, compatibilidade ou o próprio leque de opções.

A extraibilidade por máquina é a capacidade de mecanismos de busca, assistentes, feeds e ferramentas de conteúdo de isolar cada produto e manter seus campos associados. Uma pessoa pode deslizar para revelar o cartão seis; um rastreador pode nunca executar essa interação. Quando os slides seguintes chegam apenas após JavaScript, usam display:none ou existem meramente como imagens de fundo, o sistema vê uma coleção incompleta. Renderizar cada cartão na ordem semântica de origem permite que uma máquina recupere os mesmos nomes, URLs, posições, preços, moedas e disponibilidade que um comprador pode alcançar.

Siga as regras de escrita de elementos para precedência: classifique o bloco por propósito antes de escolher sua aparência. Se seu trabalho é expor uma rota secundária de produtos, este elemento se aplica. Se seu trabalho é mostrar resultados completos ou permitir avaliação lado a lado, a grade apropriada ou tabela tipada tem precedência.

Quando usar

Use um slider de produtos quando todas estas condições forem verdadeiras:

• O conjunto é secundário em relação à tarefa principal da página.
• Os produtos compartilham um relacionamento explícito, como acessórios compatíveis, alternativas da mesma categoria, itens visualizados recentemente ou uma lista editorial.
• Quatro a oito cartões concisos oferecem amplitude útil sem criar um catálogo oculto.
• A ordem pode ser explicada por relevância, compatibilidade, classificação editorial, data recente ou outra regra visível.
• Cada produto permanece compreensível como um cartão compacto e tem um destino canônico para detalhes completos.

Um slider vence uma grade quando o espaço vertical é limitado e os leitores não precisam ver todas as opções simultaneamente. Ele pode preservar contexto em uma página de detalhes do produto, manter um conjunto curto de recomendações junto no celular e expor uma próxima rota sem colocar oito descrições completas no fluxo do artigo.

Use uma grade quando o conjunto é o destino. Resultados de busca, uma categoria de produto, uma coleção filtrada ou uma coleção que precisa ser escaneada por completo precisa de contagens visíveis, ordenação, filtros, paginação e URLs estáveis. Use uma tabela de comparação quando os leitores precisam julgar as mesmas especificações entre opções. Use uma galeria de imagens quando os itens são vistas de um único assunto em vez de produtos separados comercializáveis.

Quase-erros comuns incluem uma fileira de dois itens forçada em controles de carrossel, uma categoria de 30 produtos comprimida em uma trilha, um carrossel de banner herói contendo promoções em vez de produtos, e um slider usado para esconder recomendações fracas abaixo da dobra. “Visualizados recentemente” também é um quase-erro condicional: é útil apenas quando o visitante realmente tem histórico, o título diz por que aqueles itens aparecem, e um estado vazio não fabrica atividade.

Onde posicionar

O posicionamento deve responder a uma pergunta que o leitor acabou de desenvolver. Coloque acessórios compatíveis após informações de compatibilidade e itens incluídos, alternativas após as limitações do produto principal ou resumo da decisão, e produtos relacionados após a listagem principal da categoria, não antes dela. Em conteúdo editorial, posicione a trilha após critérios e evidências, não antes de os leitores saberem por que os produtos se qualificam.

Mantenha o título, a declaração de relacionamento, a contagem de itens, os controles e os cartões em uma única região. Coloque um link “Ver todos” ao lado do título ou após a fileira quando existir uma coleção completa. O link deve levar a uma página canônica rastreável, não expandir uma trilha ilimitada do lado do cliente.

Não posicione um slider ao lado de outro slider, um banner com rotação automática, uma tabela de preços ou os controles de compra principal da página. Gestos horizontais adjacentes criam ambiguidade, enquanto preços concorrentes podem deixar confuso qual oferta o CTA principal compra. Não interrompa etapas processuais, um aviso, termos de checkout ou divulgação legal obrigatória com recomendações. Nunca coloque variantes essenciais dentro de um slider se escolher uma alterar o preço, a disponibilidade ou a configuração do produto principal; variantes pertencem aos controles do produto proprietário.

Em telas pequenas, permita um cartão completo mais um vislumbre deliberado do próximo cartão, ou um cartão completo com um rótulo de posição explícito. A região pode rolar horizontalmente, mas o documento em si não deve. Preserve um caminho visível além do slider para que um usuário de teclado ou toque nunca fique preso em navegação horizontal repetida.

Anatomia

1. Título da seção: nomeia o conjunto, como “Acessórios compatíveis”, em vez do genérico “Você também pode gostar”.
2. Declaração de relacionamento: explica por que os produtos se qualificam e se a ordem é editorial, comportamental ou comercial.
3. Contagem de itens: informa o tamanho finito antes da interação, por exemplo “6 produtos”.
4. Viewport: corta apenas a apresentação; não remove cartões fora da tela do documento.
5. Cartão de produto: preserva o nome, destino, qualificador decisivo e fatos comerciais atuais de um produto como uma única unidade.
6. Dica de continuação: usa um cartão parcial seguinte, texto de posição ou ambos; sombra sozinha é muito fácil de ignorar.
7. Controles anterior e próximo: usam botões nomeados por seu efeito e exibem estado desabilitado nos extremos.
8. Indicador de posição: anuncia um intervalo como “Produtos 1–3 de 6”, não uma fileira de pontos não rotulados.
9. Rota Ver todos: abre a coleção completa canônica quando existe.
10. Tratamento de foco: permanece visível em todos os controles e links de cartões sem ser cortado pelo viewport.

Cada cartão segue o contrato do cartão de produto . O slider possui significado de coleção e navegação, em vez de redefinir fatos do produto localmente.

Exemplos de design

Lista editorial: use para quatro a oito produtos selecionados por critérios declarados. A ordem pode representar classificação apenas quando a página contém a evidência para essa classificação; caso contrário, rotule como “Opções selecionadas” e evite alegações ordinais.

Produtos relacionados: use para itens da mesma categoria ou substitutos após o produto principal ter sido explicado. Declare a propriedade compartilhada, como fator de forma ou faixa de preço, em vez de implicar personalização.

Acessórios compatíveis: use quando cada item tem um relacionamento verificado com o produto proprietário. Repita o modelo ou faixa compatível no texto do cartão; proximidade não é garantia de compatibilidade.

Histórico comportamental: use para itens visualizados recentemente ou salvos apenas quando o visitante criou esse estado. Rotule a base, preserve a ordem de atualidade, forneça remoção quando apropriado e não emita histórico personalizado em caches compartilhados ou dados estruturados.

Parâmetros

Uma imagem é condicional porque um cartão de produto focado em texto pode ser completo sem uma. Se usada, seu arquivo deve existir, as dimensões devem reservar espaço, e o texto alternativo deve corresponder ao seu propósito. Se um cartão exibir preço ou disponibilidade, todos os pares devem exibir um campo atual equivalente ou status explícito.

Sintaxe e exemplos de código

Diretiva Markdown portátil

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="Ver todos os acessórios" viewAllUrl="/accessories/"}
## Acessórios compatíveis para mesa

Verificado para o laptop Arc 14; quatro produtos.

::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Eleva laptops de 13 a 16 polegadas e deixa as portas de carregamento livres.
::

::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adiciona sete portas e suporta carregamento pass-through de 100 W.
::
:::

Mapeamento de shortcode Hugo

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="Ver todos os acessórios" viewAllUrl="/accessories/" >}}
## Acessórios compatíveis para mesa

Verificado para o laptop Arc 14; quatro produtos.

{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Eleva laptops de 13 a 16 polegadas e deixa as portas de carregamento livres.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adiciona sete portas e suporta carregamento pass-through de 100 W.
{{< /product-slide >}}
{{< /product-slider >}}

Esta é a especificação do adaptador pretendida, não uma invocação de shortcode registrada. Ela usa apenas parâmetros nomeados. Até que o adaptador exista, implemente a coleção como HTML semântico ou uma fileira não interativa sem inventar um shortcode não suportado.

Bloco WordPress

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"Ver todos os acessórios","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Acessórios compatíveis para mesa</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verificado para o laptop Arc 14; quatro produtos.</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":"Eleva laptops de 13 a 16 polegadas e deixa as portas de carregamento livres."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adiciona sete portas e suporta carregamento pass-through de 100 W."} /-->
<!-- /wp:amicited/product-slider -->

Exemplos

Bom: compatibilidade é explícita

Acessórios verificados para Arc 14 — 4 produtos
Suporte para laptop Arc — USD 69 — Em estoque. Serve laptops de 13 a 16 polegadas; todas as portas do Arc 14 permanecem acessíveis.
Hub Dock 7 — USD 89 — Em estoque. Suporta a especificação de carregamento USB-C do Arc 14 e pass-through de 100 W.
Conjunto silencioso — USD 74 — Estoque baixo. Conecta via Bluetooth; nenhum receptor ocupa uma porta do Arc 14.
Luminária Task Mini — USD 45 — Em estoque. Usa uma fonte de alimentação USB-C separada; não consome energia do laptop.

Isso é bem-sucedido porque o relacionamento é nomeado e verificado, cada cartão faz uma declaração de compatibilidade distinta, os campos comerciais são paralelos e a contagem finita é visível. Todos os quatro itens podem existir na ordem de origem mesmo quando apenas três cabem no viewport.

Ruim: recomendações ocultas sem fundamento

Você também pode gostar
MAIS VENDIDO — $69 — Compre agora
EM ALTA — $89 — Compre agora
[Três cartões adicionais carregam após o segundo deslize.]

Isso falha porque o título não explica o relacionamento, “mais vendido” e “em alta” não têm fonte ou período definidos, a moeda é inferida, e rótulos repetidos “Compre agora” perdem a identidade do produto fora de contexto. Mais grave, três produtos não existem até a interação, portanto um usuário de teclado, rastreador ou script falho recebe um conjunto diferente.

Marcação de esquema e acessibilidade

Um slider de produtos editorial pode alimentar ItemList quando sua composição e ordem são significativas. Use um ListItem por entidade de produto visível, com position, URL canônica e a referência do produto. As posições devem corresponder ao DOM e à ordem visual. Não marque histórico de visualizados recentemente personalizado como um ItemList público, pois o conjunto não é conteúdo estável da página.

Cada cartão pode alimentar dados Product e Offer apenas quando a página visível suporta os mesmos fatos. Um nome e destino não justificam preço, avaliação, marca, disponibilidade ou dados de avaliação inventados. Gere campos visíveis e dados estruturados da mesma fonte de produto aprovada, e omita propriedades voláteis que não podem permanecer sincronizadas. Não existe um tipo de esquema de carrossel especial.

Use uma <section> nomeada ou role="region" apenas quando o título já não fornecer semântica de referência suficiente. Represente a coleção como uma <ul>, <ol> ou lista equivalente; cada cartão é um item da lista. Mantenha cartões fora da tela no DOM e na árvore de acessibilidade. O corte horizontal é apresentação, enquanto display:none, aria-hidden="true", inert ou virtualização apenas do lado do cliente torna o conteúdo indisponível.

Use botões nativos para anterior e próximo. Nomeie-os “Produtos anteriores” e “Próximos produtos”, desabilite-os corretamente nos extremos e mantenha o foco após o movimento. Anuncie “Produtos 4–6 de 8” em uma região de status educada sem mover o foco para o cartão recém-exposto. As teclas de seta podem ser um aprimoramento, mas Tab deve alcançar controles e links normalmente. Deslizar pode ser suportado, mas nunca como o único meio de entrada.

Não avance automaticamente. Respeite preferências de movimento reduzido e use rolagem imediata ou contida. Um link de cartão precisa de um nome acessível distinto contendo o nome do produto. Evite alvos de foco duplicados quando tanto imagem quanto título levam à mesma URL. Com zoom de 200%, os cartões podem se tornar um viewport de um cartão, mas texto, controles e anéis de foco devem permanecer completos e a página não deve transbordar horizontalmente.

Regras de escrita

A escrita deve tornar a composição defensável antes de tornar a fileira atraente.

• Um título específico explica a rota. Use 3–10 palavras: “Acessórios compatíveis com Arc 14” ou “Alternativas abaixo de USD 100.” Nunca dependa apenas de “Mais”, “Em alta” ou “Você também pode gostar.”
• Uma frase estabelece a seleção. Use 8–30 palavras para declarar critérios compartilhados, público, compatibilidade ou fonte do histórico. Se classificação ou popularidade determinar a ordem, nomeie a métrica, o mercado e o período.
• Conjuntos finitos permanecem inspecionáveis. Use 4–8 produtos normalmente e no máximo 12. Dois ou três cartões devem formar uma fileira estática; sortimentos maiores precisam de uma grade e rota de coleção canônica.
• Nomes de cartão preservam identidade. Use o nome oficial do produto em 1–8 palavras. Não o substitua por “Melhor custo-benefício”, “Nossa escolha” ou um slogan de campanha.
• Qualificadores respondem a uma pergunta de decisão. Use 4–18 palavras para ajuste, capacidade distintiva, compatibilidade ou limitação. Evite elogios genéricos como “qualidade premium.”
• Fatos paralelos apoiam a leitura dinâmica. Se um cartão mostra preço, moeda, disponibilidade, avaliação ou entrega, os pares mostram campos equivalentes ou estados indisponíveis explícitos da mesma fonte e mercado.
• Ordem precisa de uma base responsável. Ordem de compatibilidade pode colocar a correspondência mais forte primeiro; classificação requer critérios publicados; atualidade reflete o histórico do visitante. Posicionamento pago deve ser divulgado e não pode se passar por relevância editorial.
• Ações retêm contexto. Use “Ver suporte para laptop Arc”, não cinco instâncias de “Saiba mais.” Um CTA de cartão abre a página de detalhes canônica desse produto, a menos que a ação adicione explicitamente uma variante conhecida a um carrinho.
• Alegações voláteis precisam de responsabilidade. Preços, estoque, entrega, descontos, avaliações e popularidade vêm de sistemas aprovados e carregam o comportamento de atualização necessário. O texto editorial não deve codificar um valor conflitante.

Nunca coloque avaliações longas, matrizes de comparação, seletores de variantes, controles de quantidade, termos de checkout, depoimentos, cronômetros de contagem regressiva, pop-ups, players de vídeo ou avisos obrigatórios dentro de um slide. Não pré-selecione complementos, adicione produtos a um carrinho meramente pela navegação, ou oculte ordenação patrocinada. Um slider prevê rotas; o destino ou componente principal adjacente contém a decisão completa.

Tipos de post que o utilizam

O campo postTypes do frontmatter alimenta esta tabela. A inclusão significa que o elemento é condicional quando um conjunto secundário compacto de produtos melhora a página especificada.

Checklist de QA

• O conjunto é secundário à tarefa principal da página e tem um relacionamento de produto explícito.
• Uma grade ou tabela de comparação não serviria melhor à tarefa real do leitor.
• O slider contém 4–8 produtos normalmente e nunca excede 12.
• O título, a base de seleção, a contagem de itens, os controles, o status de posição e a rota Ver todos estão visíveis quando aplicável.
• Cada cartão tem um identificador estável, nome oficial, destino canônico e qualificador relevante para decisão.
• Campos de preço, moeda, disponibilidade, avaliação, entrega e promoção são paralelos e provenientes de fonte quando exibidos.
• Alegações de compatibilidade, classificação, popularidade, personalização e patrocínio divulgam sua base.
• Ordem do DOM, ordem visual, posição anunciada, ordem do teclado e quaisquer posições ItemList correspondem.
• Cada produto é renderizado no servidor e utilizável sem JavaScript; nenhum slide posterior depende de interação ou requisição do cliente.
• Cartões fora da tela permanecem na árvore de acessibilidade e não estão ocultos, inertes ou representados apenas por imagens de fundo.
• Botões anterior e próximo têm nomes distintos, estados desabilitados corretos, foco visível e foco estável após o movimento.
• Deslizar por toque e teclas de seta são aprimoramentos; botões padrão e navegação por Tab fornecem acesso completo.
• Não há movimento automático, roubo de foco, armadilha de teclado ou transbordamento horizontal no nível da página.
• Mudanças de posição são anunciadas como texto, e cor, corte, sombras ou pontos nunca carregam a continuidade sozinhos.
• Cada caminho de imagem resolve antes da publicação, as dimensões reservam espaço, e o texto alternativo reflete o propósito do cartão.
• Com zoom de 200% e em tela estreita, um cartão, seu texto, seus controles e seu anel de foco permanecem completos.
• Dados estruturados repetem fatos visíveis e atuais e omitem histórico personalizado ou propriedades comerciais inventadas.
• A coleção completa tem uma URL Ver todos rastreável quando os leitores razoavelmente precisam navegar além da trilha.
• As representações em Markdown portátil, Hugo e WordPress preservam os mesmos produtos, ordem, campos e fallback.

FAQ

O template da academia renderiza as cinco perguntas revisadas armazenadas no frontmatter [[faq]].