--- title: "Embla vs Swiper: qual carrossel React escolher" description: "Embla vs Swiper comparados com honestidade: tamanho do bundle, funcionalidades, headless vs com tudo incluso — e a terceira opção quando seu carrossel é na verdade um menu." canonical: "https://react-horizontal-scrolling-menu.dev/pt-br/compare/embla-vs-swiper" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- [Comparar](https://react-horizontal-scrolling-menu.dev/pt-br/compare.md)/Embla vs Swiper # Embla vs Swiper: escolha pelo que você está construindo Os dois são excelentes motores de carrossel, mantidos ativamente, e a escolha entre eles é genuinamente equilibrada. Tudo se resume a um eixo: o Swiper entrega todas as funcionalidades embutidas; o Embla entrega um pequeno motor headless sobre o qual você constrói. Esta página é escrita pelo mantenedor de uma biblioteca que não compete com nenhum dos dois — que também é a terceira resposta lá embaixo, para as construções que no fim das contas não são carrosséis. | | Embla | Swiper | | --- | --- | --- | | O que é | Motor de carrossel headless | Framework completo de slider/carrossel | | Bundle (núcleo, min+gzip) | ≈8 kB | ≈40 kB (cresce com os módulos) | | Estilização e markup | Totalmente seu — não vem com nada | DOM e CSS próprios, com tema | | Efeitos (fade, cube, coverflow…) | Plugins da comunidade, ou faça você mesmo | Embutidos, maduros | | Autoplay, paginação, miniaturas | Plugins oficiais | Módulos embutidos | | Integração com React | Hook de primeira classe (useEmblaCarousel) | Componentes wrapper sobre um núcleo vanilla | | Nota do ecossistema | O motor por trás do carrossel do shadcn/ui | O slider mais usado da web | | Melhor para | Carrosséis com design personalizado, design systems | Sliders focados em imagem, galerias ricas em funcionalidades | Os tamanhos de bundle são núcleos aproximados — confira o bundlephobia para números atuais; o do Swiper cresce com os módulos que você importa. ## Escolha o Embla quando o controle de design for o ponto principal O Embla te dá física de encaixe (snap), tratamento de arraste e um modelo de slide, e nada além disso — sem markup, sem CSS, sem setas. Essa é a força dele: em um design system, tudo o que é visível é seu, e o motor nunca briga com seus estilos. É sobre isso que o shadcn/ui constrói seu carrossel, o que indica o ponto ideal: equipes que querem um carrossel parecido com _o produto delas_, não com uma biblioteca de carrossel. O custo é que toda funcionalidade além de deslizar é um complemento ou feita à mão: autoplay e nomes de classe são plugins oficiais; pontos de paginação, miniaturas e efeitos ficam por sua conta escrever. ## Escolha o Swiper quando quiser as funcionalidades prontas O Swiper é a resposta com tudo incluso: efeitos de fade, cube e coverflow, slides virtuais, zoom, parallax, galerias de miniaturas, módulo de a11y, paginação em vários estilos — configurados, não construídos. Se seu produto precisar de três dessas coisas neste trimestre, o Swiper compensa o tamanho dele muitas vezes. O custo é o inverso do Embla: você herda o DOM do Swiper, o CSS dele para dar tema, e um núcleo em JS vanilla envolvido para React — mais pesado tanto em kilobytes quanto em superfície de API. ## A pergunta a fazer antes de escolher qualquer um dos dois As duas bibliotecas assumem que você está apresentando _slides_ — uma coisa, ou uma página de coisas, por vez, com encaixe e uma noção de posição. Boa parte dos "carrosséis" reais não é nada disso: fileiras de categorias, tiras de logos, barras de abas, filtros de chips — fileiras de itens clicáveis que o usuário examina e escolhe. Esses casos querem rolagem nativa (inércia, barra de rolagem, roda do mouse, acessibilidade de graça) mais saber quais itens estão na tela — e nem o Embla nem o Swiper modelam visibilidade por item, porque slides não são itens. Para esse formato existe uma terceira opção: o [react-horizontal-scrolling-menu](https://react-horizontal-scrolling-menu.dev/pt-br.md) (≈5,7 kB) usa a rolagem nativa e entrega `useIsVisible`, `scrollToItem` e setas sensíveis às bordas. Veja como uma [fileira estilo Netflix](https://react-horizontal-scrolling-menu.dev/pt-br/netflix-row.md), uma [barra de abas](https://react-horizontal-scrolling-menu.dev/pt-br/scrollable-tabs.md) ou uma [barra de chips](https://react-horizontal-scrolling-menu.dev/pt-br/filter-chips.md), ou a [tabela de comparação completa](https://react-horizontal-scrolling-menu.dev/pt-br/compare.md) contra os dois. [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: