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 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 faz as três coisas que o centerMode estava simulando — centralizar o item clicado, rolar nativamente com suporte a arraste, e informar quais itens estão visíveis — em ≈5,7 kB e sem motor de slider. Veja as páginas de abas roláveis e trilha de categorias 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.