Lory Carousel Slider Apresenta Animação CSS e Suporte ao Toque

Fora de todo o plugins de carrossel online Eu tenho que inclinar meu chapéu para Lory. É um tal conceito simples mas é facilmente um dos os sliders mais poderosos Na internet.

o versão minificada totaliza aproximadamente 7KB que não é pequeno mas certamente não é ruim para um controle deslizante de carrossel ativado por toque.

Você pode adicionar este plugin a qualquer site, já que roda em jQuery ou plain vanilla JS. Pode ser executado com sem dependências o que é ótimo para compatibilidade.

Lory é também um dos poucos plugins que não se degrada em navegadores mais antigos. Está totalmente suportado no IE10+, e versões mais antigas ainda podem executar o controle deslizante, apenas sem animações e pequenos extras.

Você terá que fazer toda a codificação programática você mesmo se você quiser adicionar conteúdo, mas é surpreendentemente simples. Você pode definir o tamanho de cada painel, quanto tempo deseja animar e como lidar com navegadores responsivos.

Confira a homepage do Lory para Código fonte e detalhes sobre a configuração.

Comece adicionando a biblioteca Lory JS para o seu site cabeça seção, como um plugin jQuery ou uma biblioteca de baunilha. Todas as versões estão atualmente hospedado no CDN da Cloudflare, por isso é super fácil incluir uma cópia sem nenhum download.

Com o arquivo JavaScript instalado, você desejará criar uma lista desordenada de HTML com o conteúdo do slide, mas Lory vem com algumas classes predefinidas então é bom ficar com seu modelo.

Aqui vai Código de amostra retirado do repositório principal do Lory GitHub:

Agora, em jQuery (ou JS simples), você pode configurar uma chamada de função. Deve ser algo como isto:

 $ ('. js_slider'). lory (infinito: 1);

Note o infinito opção é apenas um dos muitos recursos que você pode personalizar. E você sempre pode mudar o .js_slider classe para atender às suas necessidades.

Enquanto estiver desenvolvendo com este plugin, você terá toneladas de perguntas sobre personalização. Eu recomendo navegando na documentação que está na parte inferior da página do GitHub.

Provavelmente não é a melhor localização para docs, mas felizmente eles são muito pequenos. Você só tem cerca de 10 opções para personalizar e talvez 10-12 eventos diferentes você pode mexer com. Esta informação também pode ser encontrada na parte inferior do site Lory, mas é muito mais fácil de ler no GitHub.

Atualizações não são tão frequentes, mas você sempre pode caneta um pedido de emissão no GitHub se você tiver problemas. Se você realmente tiver problemas com o código, provavelmente terá mais facilidade em resolvê-los no Stack Overflow.

De qualquer maneira, você pode comece bem depressa usando o CDN da Cloudflare e os documentos do GitHub. E se você está procurando por um demonstração ao vivo com código confira esta entrada CodePen.