nolimits4web/swiper

O que é?

Recursos principais

• 01Slider pensado para toque, com movimento de toque 1:1 configurável.
• 02Layout de slides com Flexbox, com controle sobre slides por visualização, grupos e espaçamento.
• 03Paginação, setas de navegação e barra de rolagem integradas.
• 04Efeitos de transição fade, flip, cubo 3D e coverflow 3D.
• 05Lazy loading e slides virtuais para carrosséis grandes ou com muitas imagens.
• 06Módulos tree-shakeable com tipos TypeScript e sem dependência de jQuery.

Casos de uso

• Criar galerias de imagens ou carrosséis de produtos em sites adaptados para dispositivos móveis.
• Adicionar seções de onboarding ou banners com navegação por swipe a web apps mobile.
• Criar layouts de slides com várias linhas ou colunas usando apenas configurações em CSS.
• Vincular um slider de miniaturas a um slider principal para que um controle o outro.

Início rápido

1. 1

   Instale o Swiper pelo npm

   npm install swiper
2. 2

   Compile a versão de desenvolvimento (execute na raiz do repositório depois de cloná-lo)

   npm install && npm run build
3. 3

   Execute a demonstração do Core na pasta playground

   npm run core

Antes de usar

• !Não é compatível com todas as plataformas; destina-se apenas a navegadores modernos e aplicativos móveis.

Tópicos

Perguntas frequentes

O que é swiper?

Slider JavaScript gratuito, pensado para toque em sites e apps mobile, com transições aceleradas por hardware e sem dependência de jQuery. Swiper é uma biblioteca de slider JavaScript focada em interação por toque para sites mobile, web apps mobile e apps nativos ou híbridos. Ela usa um layout de slides baseado em Flexbox, permitindo controlar os tamanhos e as grades dos slides com CSS e parâmetros de inicialização, como slides por visualização, slides por grupo e espaçamento.

swiper é gratuito? Qual é a licença?

swiper é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

swiper ainda é mantido?

Manutenção ativa. O último commit de swiper foi em 16 de out. de 2026.

Para que posso usar swiper?

Criar galerias de imagens ou carrosséis de produtos em sites adaptados para dispositivos móveis. Adicionar seções de onboarding ou banners com navegação por swipe a web apps mobile. Criar layouts de slides com várias linhas ou colunas usando apenas configurações em CSS. Vincular um slider de miniaturas a um slider principal para que um controle o outro.

Como instalar swiper?

Instale o Swiper pelo npm: npm install swiper Compile a versão de desenvolvimento (execute na raiz do repositório depois de cloná-lo): npm install && npm run build Execute a demonstração do Core na pasta playground: npm run core

Onde consigo swiper?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/nolimits4web/swiper