--- title: "Alternativas mais leves ao Swiper para React" description: "Procurando uma alternativa mais leve ao Swiper em React? Embla e keen-slider para carrosséis de verdade, react-horizontal-scrolling-menu para fileiras em formato de menu. Tamanhos comparados." canonical: "https://react-horizontal-scrolling-menu.dev/pt-br/compare/swiper-alternatives" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- [Comparar](https://react-horizontal-scrolling-menu.dev/pt-br/compare.md)/Swiper alternatives # 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](https://react-horizontal-scrolling-menu.dev/pt-br/compare/embla-vs-swiper.md)** (≈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](https://react-horizontal-scrolling-menu.dev/pt-br.md) (≈5,7 kB) é essa rolagem nativa, mais as partes que o navegador não entrega sozinho: [visibilidade por item](https://react-horizontal-scrolling-menu.dev/pt-br/examples/simple.md), [scroll-to-item](https://react-horizontal-scrolling-menu.dev/pt-br/examples/scroll-to-item.md), setas sensíveis às bordas e [arraste que não quebra cliques](https://react-horizontal-scrolling-menu.dev/pt-br/examples/mouse-drag.md). Sem efeitos, sem encaixe, sem emulação de gestos — veja as páginas [Netflix-row](https://react-horizontal-scrolling-menu.dev/pt-br/netflix-row.md), [tabs](https://react-horizontal-scrolling-menu.dev/pt-br/scrollable-tabs.md) e [chip-bar](https://react-horizontal-scrolling-menu.dev/pt-br/filter-chips.md), ou a [tabela completa](https://react-horizontal-scrolling-menu.dev/pt-br/compare.md). ## 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. [Comparar](https://react-horizontal-scrolling-menu.dev/pt-br/compare.md) · [Ver todos os exemplos](https://react-horizontal-scrolling-menu.dev/pt-br/examples.md) · [GitHub](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu) --- More examples: Library summary for LLMs: