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 (≈5,7 kB) usa a rolagem nativa e entrega useIsVisible, scrollToItem e setas sensíveis às bordas. Veja como uma fileira estilo Netflix, uma barra de abas ou uma barra de chips, ou a tabela de comparação completa contra os dois.