Text Carousel Componentes

O que é

É aquela área do site onde os depoimentos de clientes vão se revezando: "Atendimento nota 10!" some e entra "Chegou antes do prazo". Serve para qualquer bloco curto de texto que você quer mostrar um de cada vez, no mesmo espaço: depoimentos, frases da marca, avisos da loja ("Frete grátis acima de R$ 199"), números de destaque. Você escreve os blocos dentro de sw-carousel-trk, e escolhe como eles trocam (sw-carousel-effect), se trocam sozinhos (sw-carousel-auto) e a velocidade (sw-carousel-dur). Para fotos passando, o componente certo é o Slider.

O JavaScript do núcleo mostra o bloco que tem is-act (ou o primeiro, se nenhum tiver) e esconde os outros. Ao trocar, o bloco que sai e o que entra fazem o efeito escolhido ao mesmo tempo. As setas sw-carousel-prv/sw-carousel-nxt e as bolinhas (que ele desenha sozinho dentro de sw-carousel-dts) são opcionais. Também dá para trocar arrastando com o dedo ou o mouse. Com troca automática, ele pausa enquanto o mouse está em cima. Funciona no tema claro e no escuro.

Quando usar

• Depoimentos de clientes na página inicial ou de vendas.
• Faixa de avisos no topo da loja: frete grátis, cupom, prazo de entrega.
• Frases de impacto ou números ("+500 clientes", "10 anos de mercado") se revezando.
• Não use para informação que a pessoa precisa ler (preço, prazo legal): quem passa rápido pode não ver.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O segundo CSS traz os ícones das setas.

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

2. 2

   Coloque os blocos dentro de sw-carousel-trk, as setas e o lugar das bolinhas (vazio). Com sw-carousel-auto="4000" troca sozinho a cada 4 segundos.

   "Cortaram meu cabelo do jeito que eu pedi. Recomendo!" — Lucas

   "Ambiente top e café de cortesia." — Rafael

   "Marquei pelo WhatsApp e fui atendido na hora." — Diego

   <div sw-carousel sw-carousel-auto="4000">
     <div sw-carousel-trk>
       <p class="is-act">"Cortaram meu cabelo do jeito que eu pedi. Recomendo!" — Lucas</p>
       <p>"Ambiente top e café de cortesia." — Rafael</p>
       <p>"Marquei pelo WhatsApp e fui atendido na hora." — Diego</p>
     </div>
     <button type="button" sw-carousel-prv aria-label="Anterior"><i class="swi-chevron-left"></i></button>
     <div sw-carousel-dts></div>
     <button type="button" sw-carousel-nxt aria-label="Próximo"><i class="swi-chevron-right"></i></button>
   </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-carousel sw-carousel-effect="slide-left" sw-carousel-auto="5000">
  <div sw-carousel-trk>
    <blockquote class="is-act">
      <p>"Meu site ficou pronto em uma semana e já chegaram três orçamentos pelo WhatsApp."</p>
      <footer><strong>Juliana Prado</strong> · Doceria da Ju · ★★★★★</footer>
    </blockquote>
    <blockquote>
      <p>"O painel é tão fácil que eu mesmo troco as fotos dos pratos."</p>
      <footer><strong>Marcos Lima</strong> · Restaurante Sabor Mineiro · ★★★★★</footer>
    </blockquote>
    <blockquote>
      <p>"Suporte rápido e sem enrolação."</p>
      <footer><strong>Fernanda Reis</strong> · Clínica Vida · ★★★★★</footer>
    </blockquote>
  </div>
  <button type="button" sw-carousel-prv aria-label="Anterior"><i class="swi-chevron-left"></i></button>
  <div sw-carousel-dts></div>
  <button type="button" sw-carousel-nxt aria-label="Próximo"><i class="swi-chevron-right"></i></button>
</div>

<div sw-carousel sw-carousel-effect="slide-up" sw-carousel-auto="3000" class="bg-sur t-ct">
  <div sw-carousel-trk>
    <p class="is-act"><i class="swi-package"></i> Frete grátis acima de R$ 199</p>
    <p><i class="swi-tag"></i> Cupom <strong>BEMVINDO10</strong> na primeira compra</p>
    <p><i class="swi-credit-card"></i> Até 6x sem juros no cartão</p>
  </div>
</div>

<div sw-carousel id="passos" sw-carousel-effect="zoom-in">
  <div sw-carousel-trk>
    <p class="is-act">Passo 1 — Escolha o serviço</p>
    <p>Passo 2 — Escolha o horário</p>
    <p>Passo 3 — Confirme pelo WhatsApp</p>
  </div>
  <div sw-carousel-dts></div>
</div>

<script>
  const passos = document.getElementById('passos');
  SW.Carousel.next(passos);       // próximo
  SW.Carousel.prev(passos);       // anterior
  SW.Carousel.goTo(passos, 0);    // vai direto para o 1º (conta a partir de 0)
</script>

document.getElementById('passos').addEventListener('sw:carousel:change', (e) => {
  // e.detail.index = posição do bloco que entrou (0, 1, 2…)
  document.getElementById('contador').textContent = (e.detail.index + 1) + ' de 3';
});

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js.
• swcore.compl.min.css — só se usar ícones swi-* nas setas (pode usar ‹ › de texto no lugar).

Cuidados — erros comuns

• Esquecer o sw-carousel-trk em volta dos blocos: sem ele nada troca.
• is-act em mais de um bloco: vale o primeiro deles.
• Blocos com alturas bem diferentes: a caixa muda de altura a cada troca e a página "pula". Deixe os textos com tamanho parecido.
• Troca automática rápida demais (sw-carousel-auto="1500") em texto longo: ninguém consegue ler. Dê pelo menos 4000 ms para depoimentos.
• Colocar fotos grandes: funciona, mas o Slider é feito para isso.

O que ele não faz

• Não troca pelas setas do teclado.
• Um bloco por vez (não mostra 3 lado a lado).
• Não pausa sozinho quando a aba fica escondida nem quando a pessoa está usando leitor de tela.