swiper

Comece | Documentação | Demos

Swiper

Swiper - é o controle deslizante de toque móvel gratuito e mais moderno, com transições aceleradas de hardware e comportamento nativo incrível. Destina -se a ser usado em sites móveis, aplicativos da Web móveis e aplicativos nativos/híbridos móveis.

O Swiper não é compatível com todas as plataformas, é um controle deslizante de toque moderno, focado apenas em aplicativos/plataformas modernas para trazer a melhor experiência e simplicidade.

Patrocinadores

Características

• Chave de árvore : somente os módulos que você usa serão importados para o pacote do seu aplicativo.
• Fazenda para dispositivos móveis : pretende ser usado em sites móveis, aplicativos da Web móveis e aplicativos nativos/híbridos móveis.
• Biblioteca Agnóstico : O Swiper não requer bibliotecas JavaScript como o JQuery, o que torna o Swiper muito menor e mais rápido. Pode ser usado com segurança com bibliotecas como jQuery, zepto, jQuery mobile, etc.
• 1: 1 Movimento de toque : por padrão, o swiper fornece interação de movimento 1: 1 de toque, mas essa proporção pode ser configurada através de configurações de swiper.
• Observador da mutação : o swiper tem uma opção para ativar o observador de mutação, com esse swiper de recurso será automaticamente reinacionalizado e recalcular todos os parâmetros necessários se você fizer alterações dinâmicas no DOM ou nos estilos de swiper.
• Rich API : Swiper vem com uma API muito rica. Ele permite criar sua própria paginação, botões de navegação, efeitos de paralaxe e muito mais.
• RTL : Swiper é o único controle deslizante que fornece suporte a 100% RTL com o layout correto.
• Layout de slides de várias fileiras : o swiper permite um layout de vários slides de linha, com alguns slides por coluna.
• Efeitos de transição : desbotamento, flip, cubo 3D, 3D Coverflow.
• Controle de duas vias : o swiper pode ser usado como controlador para qualquer número de outros swipers e até ser controlado ao mesmo tempo.
• Controle completo de navegação : o swiper vem com todos os elementos de navegação integrados necessários, como paginação, setas de navegação e barra de rolagem.
• Layout do Flexbox : o swiper usa o layout do Flexbox Modern para o layout dos slides, que resolve muitos problemas e tempo com caclulações de tamanho. Esse layout também permite a configuração da grade de slides usando CSS puro.
• Grade de layout de slides mais flexíveis : o swiper possui muitos parâmetros na inicialização para torná -lo o mais flexível possível. Você pode controlar os slides por vista, por coluna, por grupo, espaço entre slides e muito mais.
• Imagens Lazy Carregamento : Swiper Lazy Carreging Atrasos carregando o carregamento de imagens em slides inativos/invisíveis até que o usuário deslize para elas. Esse recurso pode tornar a página carregar mais rápido e melhorar o desempenho do swiper.
• Slides virtuais : o swiper vem com o recurso de slides virtuais que é ótimo quando você tem muitos slides ou slides pesados ​​de conteúdo/imagem, para que ele mantenha apenas a quantidade necessária de slides no DOM.
• Modo de loop
• AutoPlay
• Controle do teclado
• Controle de roda de mouse
• Sliders aninhados
• Navegação histórica
• Navegação de hash
• Configuração dos pontos de interrupção
• Acessibilidade (A11Y)
• E muito mais ...

Comunidade

A comunidade de swiper pode ser encontrada nas discussões do github, onde você pode fazer perguntas, idéias de voz e compartilhar seus projetos

Nosso Código de Conduta se aplica a todos os canais da comunidade Swiper.

Dist / build

Nos arquivos de uso da produção (JS e CSS) apenas da dist/ Pasta, haverá as versões mais estáveis.

Construção de desenvolvimento

Instale todas as dependências, na raiz do repo:

$ npm install

E construir a versão de desenvolvimento do swiper:

$ npm run build

O resultado está disponível em dist/ pasta.

Demonsionamentos em execução:

Todas as demos localizadas na ./playground . Lá você encontrará versões Core (HTML, JS), React, Vue. Para abrir a demonstração, execute:

• Núcleo : npm run core
• Reação : npm run react
• Vue : npm run vue

Construção de produção

$ npm run build:prod

A versão de produção estará disponível em dist/ Pasta.

Contribuindo

Todas as alterações devem estar comprometidas apenas com src/ arquivos. Antes de abrir um problema, revise a diretriz contribuinte.

Principais recursos de roteiro

• Principais solicitações de recurso (adicione seus próprios votos usando a? Reação)
• Principais insetos? (Adicione seus próprios votos usando a reação?

Colaboradores

Contribuintes de código

Este projeto existe graças a todas as pessoas que contribuem. [Contribuir].

Contribuintes financeiros

Torne -se um colaborador financeiro e ajude -nos a sustentar nossa comunidade. [Contribuir]