Slider de imagens Componentes

O que é

É aquele bloco que troca de imagem sozinho no topo de uma loja ("Promoção de inverno" → "Frete grátis" → "Parcele em 10x"), ou a fileira de produtos que anda para o lado quando você clica na seta. Cada slide pode ser uma foto, um vídeo ou um bloco inteiro com título e botão. Você escreve a caixa sw-slider, a pista sw-slider-trk e um sw-slider-it para cada slide; setas e bolinhas são opcionais.

Precisa do JavaScript do SWCore (vem no swcore.min.js). O script mede a largura da caixa, arruma os slides lado a lado e anda com eles. Ele também liga sozinho: arrastar com o dedo no celular, setas do teclado (← →) quando o slider está em foco, e volta infinita (depois do último vem o primeiro, sem "rebobinar"). A caixa precisa ter altura — a forma mais fácil é uma classe de proporção do SWCore, como ar-21-9.

Quando usar

• Banner do topo com 2 a 5 chamadas que se revezam: um slide por vez, troca automática — sw-slider-auto="5000".
• Vitrine de produtos ou depoimentos lado a lado: vários por vez — sw-slider-show="3".
• Foto de capa com movimento (imobiliária, restaurante, turismo): zoom lento — sw-slider-effect="zoom".
• Para trocar só frases curtas, use o Text Carousel, que é mais leve.

Comece aqui

1. 1

   Coloque o SWCore na página (uma vez só, vale para todos os componentes): o CSS no <head> e o JS no fim do <body>.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Monte a caixa com altura (aqui a proporção ar-21-9), a pista e um item por slide. Setas e bolinhas são peças opcionais dentro da caixa.

   Promoção de inverno

   Frete grátis no Nordeste

   Parcele em 10x

   ‹ ›

   <div sw-slider class="ar-21-9">
     <div sw-slider-trk>
       <div sw-slider-it><img class="media-fill" src="/banner-1.webp" alt="Promoção de inverno"></div>
       <div sw-slider-it><img class="media-fill" src="/banner-2.webp" alt="Frete grátis no Nordeste"></div>
       <div sw-slider-it><img class="media-fill" src="/banner-3.webp" alt="Parcele em 10x"></div>
     </div>
     <button sw-slider-prv aria-label="Anterior">‹</button>
     <button sw-slider-nxt aria-label="Próximo">›</button>
     <div sw-slider-dot-grp></div>
   </div>

3. 3

   Quer que troque sozinho? Acrescente sw-slider-auto com o tempo em milissegundos (5000 = 5 segundos). Ele pausa quando o mouse fica em cima.

   <div sw-slider class="ar-21-9" sw-slider-auto="5000">…</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.

Banner do topo de uma loja, com foto e chamada Ao vivo

Café especial em grão Ver ofertas

Entrega no mesmo dia Consultar CEP

‹ ›

<div sw-slider class="ar-21-9" sw-slider-auto="5000">
  <div sw-slider-trk>
    <div sw-slider-it class="rel">
      <img class="media-fill" src="/img/banner-cafe.webp" alt="Cafeteria com balcão de madeira">
      <div class="abs-fill flx f-cl j-ct als gap-3 p-4">
        <strong class="t-xg">Café especial em grão</strong>
        <a href="/ofertas" sw-btn="pri">Ver ofertas</a>
      </div>
    </div>
    <div sw-slider-it class="rel">
      <img class="media-fill" src="/img/banner-entrega.webp" alt="Xícara de café sobre a mesa">
      <div class="abs-fill flx f-cl j-ct als gap-3 p-4">
        <strong class="t-xg">Entrega no mesmo dia</strong>
        <a href="/entrega" sw-btn="glass">Consultar CEP</a>
      </div>
    </div>
  </div>
  <button sw-slider-prv aria-label="Anterior">‹</button>
  <button sw-slider-nxt aria-label="Próximo">›</button>
  <div sw-slider-dot-grp></div>
</div>

Capa de imobiliária com zoom lento (Ken Burns) Ao vivo

<div sw-slider class="ar-21-9" sw-slider-effect="zoom" sw-slider-auto="5000">
  <div sw-slider-trk>
    <div sw-slider-it><img class="media-fill" src="/img/sala.webp" alt="Sala ampla com janelas"></div>
    <div sw-slider-it><img class="media-fill" src="/img/fachada.webp" alt="Fachada do prédio"></div>
    <div sw-slider-it><img class="media-fill" src="/img/vista.webp" alt="Vista da cidade"></div>
  </div>
  <div sw-slider-dot-grp></div>
</div>

<div sw-slider class="ar-21-9" sw-slider-show="2" sw-slider-scroll="1" sw-slider-auto="6000">
  <div sw-slider-trk>
    <div sw-slider-it class="p-1"><blockquote class="h-fl flx f-cl j-ct gap-2 p-3 bg-sur bd r-m">"Meu site ficou pronto em uma semana e já recebi pedidos."<cite class="t-mut">Ana, confeitaria</cite></blockquote></div>
    <div sw-slider-it class="p-1"><blockquote class="h-fl flx f-cl j-ct gap-2 p-3 bg-sur bd r-m">"Agora os clientes marcam horário sozinhos pelo celular."<cite class="t-mut">Bruno, barbearia</cite></blockquote></div>
    <div sw-slider-it class="p-1"><blockquote class="h-fl flx f-cl j-ct gap-2 p-3 bg-sur bd r-m">"Atendimento rápido e sem enrolação."<cite class="t-mut">Carla, clínica</cite></blockquote></div>
  </div>
  <div sw-slider-dot-grp></div>
</div>

<div sw-slider id="vitrine" class="ar-21-9">…</div>

<script>
  const vitrine = document.getElementById('vitrine');

  SW.Slider.next(vitrine);      // próximo
  SW.Slider.prev(vitrine);      // anterior
  SW.Slider.goTo(vitrine, 2);   // vai para a página 3 (a contagem começa em 0)

  vitrine.addEventListener('sw:slider:change', (e) => {
    console.log('foi para a página', e.detail.page);
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.
• Altura na caixa [sw-slider] — pela classe de proporção (ar-21-9, ar-16-9, ar-2-1, ar-4-3…) ou pelo CSS da sua página.

Cuidados — erros comuns

• Caixa sem altura: o slider nasce achatado e parece que "sumiu". Coloque class="ar-21-9" (ou outra proporção) na [sw-slider].
• Esquecer o sw-slider-trk: sem a pista, nada acontece — os itens precisam estar dentro dela.
• Escrever sw-slider-dur="800" sem unidade: a animação some (o navegador não entende "800"). Use "800ms" ou "0.8s".
• Foto dentro do slide sem class="media-fill": ela não preenche o slide e sobra espaço. media-fill faz a foto cobrir sem distorcer.
• Troca automática muito rápida (menos de 3 s) não dá tempo de ler. Para banner com texto, use 5000 ou mais.
• Colocar sw-slider-show junto com sw-slider-effect="zoom": no zoom os slides ficam empilhados, então só aparece um de cada vez.

O que ele não faz

• Não muda o número de slides visíveis conforme a tela: sw-slider-show="3" mostra 3 também no celular. Para vitrine, prefira 2 ou use outro slider só no celular.
• Não carrega as fotos sob demanda: todas baixam junto com a página. Use imagens leves (WebP) e poucas.
• Para trocar só frases, o Text Carousel é o componente certo.