Gerador de carrossel (slider) com CSS scroll-snap

Gerador de carrossel (slider) com CSS scroll-snap: para que serve

Carrossel de fotos ou cards é comum em sites de comércio, mas as bibliotecas de slider pesam e às vezes travam a rolagem no celular.

Este gerador usa o scroll-snap do CSS, que encaixa cada item usando a rolagem nativa do navegador: o arraste com o dedo fica suave, funciona com trackpad e teclado e quase não tem JavaScript. Escolha quantos itens aparecem por vez no computador e no celular (inclusive um e um pedaço do próximo, para mostrar que dá para arrastar), o espaço e os cantos. Sem rotação automática, que atrapalha a leitura e a acessibilidade (WCAG 2.2.2).

Como usar

1. Cole os endereços das imagens.
2. Escolha quantos aparecem por vez e o espaçamento.
3. Copie o código e cole no site.

Quando usar

• Vitrine de produtos.
• Fotos de trabalhos e portfólio.
• Cards de depoimentos ou serviços.

Perguntas frequentes

Por que scroll-snap e não uma biblioteca?

O scroll-snap usa a rolagem nativa do navegador: o arraste no celular fica suave como no Instagram, funciona com trackpad e teclado e não pesa nada. Bibliotecas de slider costumam adicionar dezenas de KB de JavaScript para fazer a mesma coisa.

O carrossel passa sozinho?

Não, de propósito. Carrossel que gira sozinho atrapalha a leitura e é um problema de acessibilidade (WCAG 2.2.2 exige poder pausar o que se move por mais de 5 segundos). Quem quiser ver mais arrasta ou usa as setas.

Dá para usar com cards de texto?

Sim. Troque as imagens por qualquer conteúdo dentro de cada item da lista; o tamanho e o encaixe continuam os mesmos.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas