--- title: "Alternativas ao react-slick em 2026" description: "Migrando do react-slick: Embla e Swiper para carrosséis de verdade, react-horizontal-scrolling-menu para fileiras que usavam centerMode como navegação. Guia de migração honesto." canonical: "https://react-horizontal-scrolling-menu.dev/pt-br/compare/react-slick-alternatives" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- [Comparar](https://react-horizontal-scrolling-menu.dev/pt-br/compare.md)/react-slick alternatives # Alternativas ao react-slick: migre de acordo com o que você construiu com ele O react-slick porta o carrossel slick da era jQuery para o React. Ele ainda funciona, mas a arquitetura é anterior aos hooks, os lançamentos são raros, e ele arrasta um arquivo CSS separado para todo build. A substituição certa depende menos das funcionalidades e mais de em qual dos dois grupos o seu uso se encaixa. | | react-slick | Embla | Swiper | react-horizontal-scrolling-menu | | --- | --- | --- | --- | --- | | O que é | Porte para React do slick em jQuery | Motor de carrossel headless | Framework completo de slider | Menu de rolagem, rolagem nativa | | Manutenção | Rara | Ativa | Ativa | Ativa desde 2018 | | Bundle (min+gzip) | ≈15 kB + CSS do slick | ≈8 kB | ≈40 kB | ≈5,7 kB | | Precisa de arquivo CSS extra | Sim (dois) | Não | Sim (núcleo) | Um, ou Tailwind via item shadcn | | Semântica de slide (snap, pontos, fade) | Sim | Sim | Sim | Não — de propósito | | Fileiras de itens clicáveis | Forçado via centerMode | Construído à mão sobre o motor | Configurado contra a lógica natural | O caso de uso principal | Os tamanhos são núcleos aproximados. A última coluna é a própria biblioteca deste site — a tabela deixa isso claro em vez de fingir o contrário. ## Grupo um: era um carrossel de verdade Sliders de hero, galerias de imagens, carrosséis de depoimentos — qualquer coisa em que os pontos, o fade e o autoplay do slick carregavam o design. Migre para um motor de carrossel de verdade: - **[Embla](https://react-horizontal-scrolling-menu.dev/pt-br/compare/embla-vs-swiper.md)** se você estiliza tudo por conta própria e quer um núcleo headless pequeno — o mais próximo de "slick, modernizado" em espírito. - **Swiper** se você usava bastante a lista de funcionalidades do slick; toda funcionalidade do slick tem um equivalente no Swiper, geralmente melhor. Mapeie `slidesToShow`/`slidesToScroll` para `slidesInView`/`slidesToScroll` do Embla ou `slidesPerView`/`slidesPerGroup` do Swiper, e espere ter que apagar suas sobrescritas de CSS de posicionamento de setas — os dois sucessores deixam você renderizar seus próprios botões. ## Grupo dois: era navegação disfarçada de centerMode A outra instalação do slick é a discreta: uma fileira de categorias, logos, datas ou filtros, forçada a virar um carrossel com `centerMode`, `focusOnSelect` e `variableWidth` porque o slick já estava no bundle. O sinal é o que você teve que combater: cliques disparando depois de arrastes, setas nos momentos errados, itens que você não conseguia medir, encaixe (snap) que você não queria. Aquela fileira era um menu. O [react-horizontal-scrolling-menu](https://react-horizontal-scrolling-menu.dev/pt-br.md) faz as três coisas que o centerMode estava simulando — [centralizar o item clicado](https://react-horizontal-scrolling-menu.dev/pt-br/examples/center-on-click.md), rolar nativamente com [suporte a arraste](https://react-horizontal-scrolling-menu.dev/pt-br/examples/mouse-drag.md), e informar [quais itens estão visíveis](https://react-horizontal-scrolling-menu.dev/pt-br/examples/simple.md) — em ≈5,7 kB e sem motor de slider. Veja as páginas de [abas roláveis](https://react-horizontal-scrolling-menu.dev/pt-br/scrollable-tabs.md) e [trilha de categorias](https://react-horizontal-scrolling-menu.dev/pt-br/category-rail.md) para os dois formatos mais comuns. ## Seja qual for o grupo: a migração é menor do que parece A superfície de API do slick é grande, mas auditorias de configurações reais encolhem rápido: a maioria dos projetos usa um punhado de props. Liste as que você realmente define, decida em qual grupo cada uso se encaixa, e migre por instância — os dois grupos costumam coexistir em um mesmo código-fonte, e não há regra nenhuma dizendo que os dois precisam ir para a mesma biblioteca. [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: