Carrossel de arrastar (sw-trilho) CSS

O que é

Serve para mostrar muita coisa num espaço pequeno: depoimentos, produtos, serviços, planos, fotos. Tudo que você colocar dentro de <div sw-trilho> vira um item da fileira. No celular a pessoa arrasta com o dedo; no computador, rola para o lado com o trackpad ou com Shift + rodinha do mouse. Quando solta, o item encaixa certinho.

É só CSS: os itens ficam lado a lado numa grade que rola na horizontal, com "encaixe" (scroll-snap) — o navegador faz o movimento. Cada item tem a mesma largura: até 32rem, ou 80% da tela no celular. As palavras dentro do atributo mudam o tamanho e o ponto de encaixe. Se você quer setas, bolinhas e troca automática, use o Carousel.

Quando usar

• Depoimentos de clientes — vários, sem empilhar a página.
• Vitrine de produtos ou serviços no celular, uma "prateleira" que desliza.
• Galeria de fotos uma por vez (cheio).
• Tabela de planos que no celular vira fileira arrastável.

Comece aqui

1. 1

   Coloque o SW Core no <head>. O trilho é só CSS: não precisa do arquivo de JavaScript.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Coloque os itens dentro de <div sw-trilho>. Cada filho direto vira um item. Arraste para o lado:

   "Atendimento nota 10!"

   Ana, cliente desde 2023

   "Site pronto em uma semana."

   Carlos, loja de roupas

   "Dobrou meus pedidos."

   Beatriz, confeitaria

   <div sw-trilho>
     <div sw-card="p"><div class="sw-card-bdy"><strong>"Atendimento nota 10!"</strong><p class="t-mut t-pp">Ana, cliente desde 2023</p></div></div>
     <div sw-card="p"><div class="sw-card-bdy"><strong>"Site pronto em uma semana."</strong><p class="t-mut t-pp">Carlos, loja de roupas</p></div></div>
     <div sw-card="p"><div class="sw-card-bdy"><strong>"Dobrou meus pedidos."</strong><p class="t-mut t-pp">Beatriz, confeitaria</p></div></div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div sw-trilho="centro">
  <div sw-card="tst"><p class="sw-card-qt">"Atendimento rápido e o site ficou lindo. Recomendo!"</p><div class="sw-card-usr"><span sw-avt="p">AN</span><div><div class="sw-card-usr-nm">Ana Nunes</div><div class="sw-card-usr-rl">Estúdio de pilates</div></div></div></div>
  <div sw-card="tst"><p class="sw-card-qt">"Meus pedidos pelo WhatsApp dobraram no primeiro mês."</p><div class="sw-card-usr"><span sw-avt="p suc">BR</span><div><div class="sw-card-usr-nm">Beatriz Rocha</div><div class="sw-card-usr-rl">Confeitaria</div></div></div></div>
  <div sw-card="tst"><p class="sw-card-qt">"Entregaram antes do prazo e explicaram tudo."</p><div class="sw-card-usr"><span sw-avt="p inf">CM</span><div><div class="sw-card-usr-nm">Carlos Melo</div><div class="sw-card-usr-rl">Loja de roupas</div></div></div></div>
</div>

<div sw-trilho class="vitrine">
  <div sw-card="prd">
    <div class="sw-card-cnt">
      <div class="sw-card-nme">Camiseta básica</div>
      <div class="sw-card-prc"><span class="sw-card-prc-cur">R$ 59</span></div>
    </div>
  </div>
  <!-- um sw-card por produto -->
</div>

<style>
  .vitrine { --sw-trilho-w: 20rem; }   /* cada produto com 20rem */
</style>

<div sw-trilho="cheio">
  <img src="fachada.webp" alt="Fachada da clínica" loading="lazy">
  <img src="recepcao.webp" alt="Recepção" loading="lazy">
  <img src="sala.webp" alt="Sala de espera" loading="lazy">
</div>

Precisa de quê

• swcore.min.css — o trilho.
• Nenhum JavaScript.

Cuidados — erros comuns

• Só os filhos diretos viram itens. Se você embrulhar tudo numa <div> extra dentro do trilho, vira um item só.
• Foto dentro do trilho: coloque alt e loading="lazy" — as fotos que estão fora da tela só carregam quando a pessoa chega nelas.
• No computador, muita gente não sabe que dá para rolar para o lado. Deixe o último item "cortado" na borda (o padrão já faz isso) para mostrar que tem mais.
• Para mudar a largura, use a variável --sw-trilho-w numa classe sua — não coloque width nos itens.

O que ele não faz

• Não tem setas, bolinhas nem troca automática. Para isso use o Carousel (sw-carousel).
• Todos os itens têm a mesma largura.