SWCore
SWCore / CSS / Carrossel de arrastar (sw-trilho)

Carrossel de arrastar (sw-trilho) CSS

Arraste com o dedo ou role para o lado: cada item encaixa. Sem biblioteca de slider.

O que é

Serve para galeria, depoimentos, produtos, planos. Tudo que está dentro vira um item. No celular é o gesto natural; no computador, rolagem lateral (trackpad, Shift+roda).

Como funciona

scroll-snap + grade em coluna. A largura de cada item vem de --sw-trilho-w (troque à vontade). Para setas e bolinhas de navegação automáticas, use o sw-carousel.

Exemplos

Arraste para o lado Ao vivo
1
2
3
4
5
<div sw-trilho>
  <img src="foto1.webp" alt="..." loading="lazy">
  <img src="foto2.webp" alt="..." loading="lazy">
</div>

<div sw-trilho="p centro">...</div>

Atributos

sw-trilho
itens de até 32rem (80% no celular)
sw-trilho="p\|g\|cheio"
itens pequenos / grandes / um por vez
sw-trilho="centro"
encaixa no centro em vez do começo
style="--sw-trilho-w:20rem"
largura livre

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • swcore.min.css 2.1.0

Limitações — o que ele não faz

Nenhuma.

← AnteriorSanfona nativa (sw-sanfona) Próximo →Formulário que trava (sw-trava)