Alternativas ao Swiper para React, de acordo com o que você está realmente fugindo
Ninguém deixa o Swiper porque ele é ruim — é o slider mais completo que existe. As pessoas o deixam pelo peso (≈40 kB antes dos módulos), por herdar o DOM e o CSS dele, ou porque o "slider" delas nunca foi realmente feito de slides. Cada reclamação tem uma resposta ideal diferente.
| Swiper | Embla | keen-slider | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Bundle (núcleo, min+gzip) | ≈40 kB | ≈8 kB | ≈7 kB | ≈5,7 kB |
| Modelo | Slides, tudo incluso | Slides, headless | Slides, motor mínimo | Itens em uma fileira de rolagem nativa |
| Efeitos e módulos | O mais rico disponível | Plugins / faça você mesmo | Alguns embutidos | Nenhum — receitas no lugar |
| Controla a camada de gestos | Sim (transforms) | Sim (transforms) | Sim (transforms) | Não — o navegador rola |
| Visibilidade por item | Eventos de índice de slide | Eventos de índice de slide | Eventos de índice de slide | Embutida (useIsVisible) |
| Melhor troca quando | — | Você já estiliza tudo de qualquer forma | Slider mínimo, sem prisão ao React | Os "slides" são itens clicáveis |
Os tamanhos são núcleos aproximados — o do Swiper cresce com os módulos importados, o que também significa que um build enxuto do Swiper é menor do que sua reputação sugere.
Fugindo dos kilobytes: Embla ou keen-slider
Se o produto é um carrossel de verdade — com encaixe, uma página de slides por vez — os motores leves são quase um substituto direto:
- Embla (≈8 kB): headless, física excelente, hook de primeira classe para React, o motor por trás do carrossel do shadcn/ui. Você traz todo o markup e o CSS — que é justamente o ponto.
- keen-slider (≈7 kB): um motor mínimo e agnóstico de framework, bom quando o mesmo slider precisa rodar em React e em superfícies fora do React.
Os dois mantêm o modelo de slide baseado em transform, então efeitos como fade ou coverflow continuam sendo faça-você-mesmo — se você depende deles, um build enxuto do Swiper é honestamente a resposta melhor do que reimplementá-los.
Fugindo do modelo de slide: o caso em formato de menu
A outra saída é para construções em que a semântica de slide do Swiper nunca foi estrutural: fileiras de categorias, paredes de logos, barras de abas, barras de chips, trilhas de produto. Os sinais são configurações como slidesPerView: 'auto' combinado com freeMode: true — essa combinação é o Swiper sendo forçado a imitar a rolagem nativa.
react-horizontal-scrolling-menu (≈5,7 kB) é essa rolagem nativa, mais as partes que o navegador não entrega sozinho: visibilidade por item, scroll-to-item, setas sensíveis às bordas e arraste que não quebra cliques. Sem efeitos, sem encaixe, sem emulação de gestos — veja as páginas Netflix-row, tabs e chip-bar, ou a tabela completa.
Um aviso justo nas duas direções
Migrar do Swiper para economizar peso e depois construir autoplay, paginação, anúncios de a11y e efeitos à mão é assim que um problema de 40 kB vira um problema de um mês-pessoa. Troque para um motor mais leve quando seu uso for genuinamente um subconjunto — e para um menu de rolagem só quando a semântica de slide sempre foi fingida. Se você usa a profundidade do Swiper, fique com o Swiper.