Os melhores tutoriais de carrossel de CSS e JavaScript no Tuts+

Interessado em construir um carrossel, mas não sabe por onde começar? Você está no lugar perfeito; hoje vamos explorar os melhores tutoriais de carrossel de CSS e JavaScript que estão disponíveis no Envato Tuts+.

De tutoriais explicando como usar o componente Bootstrap carrossel, várias bibliotecas JavaScript de carrossel e apresentação de slides e como codificar coisas do zero, temos tudo no Tuts+!

1. Apresentação de slides CSS pura

Você sabia que pode criar uma apresentação de slides somente CSS?

A demonstração abaixo mostra como alcançá-lo, aproveitando a técnica de hack de caixa de seleção CSS. É totalmente funcional e suporta navegação por setas, navegação por pontos, navegação por miniaturas e navegação por teclado.

Neste exercício, a instrutora Jemima Abu, percorre uma maneira muito rápida de construir um carrossel JavaScript rolável simples com apenas algumas linhas de código.

3. Apresentação de slides em tela cheia do JavaScript Vanilla

Este exercício descreve como criar uma apresentação de slides JavaScript em tela cheia onde o cursor padrão se transforma em uma seta de navegação cada vez que passamos o mouse sobre a apresentação de slides.

Dependendo da posição do cursor, a seta seguinte ou anterior é exibida. Ao clicar nele, o slide seguinte ou anterior é exibido.

Este carrossel suporta algumas opções de personalização para o Reprodução automática modo.

4. Controle deslizante responsivo com Owl.js

Este tutorial ensina como usar o Owl.js (uma biblioteca JavaScript muito popular) para construir um controle deslizante de tela cheia.

Indo um pouco além, também mostra como animar os elementos de texto de cada slide ativo sequencialmente usando alguns dos eventos do carrossel.

Como bônus, também aborda como adaptar a posição dos pontos com base na altura do conteúdo do slide ativo.

Esta biblioteca não é mais mantida, portanto, use-a com cuidado.

Neste exercício, estamos usando slick.js, outro carrossel JavaScript popular, para desenvolver uma galeria de imagens.

No modo desktop, no lado esquerdo, estão as imagens em miniatura, enquanto no lado direito está o slide em destaque/ativo. No modo móvel, as imagens em miniatura aparecem abaixo da em destaque.

Para criar esse efeito, estamos configurando dois carrosséis independentes e sincronizando-os, graças ao recurso de sincronização do slick.

6. Controle deslizante responsivo com Swiper.js

Swiper.js é outra opção bem conhecida para construir carrosséis JavaScript complexos. Neste exercício, estamos incorporando um controle deslizante swiper.js como parte de um layout assimétrico.

Você pode estar familiarizado com o Bootstrap, o framework de desenvolvimento front-end mais popular. Neste exercício, estendemos sua funcionalidade construindo uma galeria lightbox.

No ato factual, não estamos construindo nada de novo. Estamos apenas customizando e combinando componentes Bootstrap existentes.

O UIkit é outro framework front-end modular e publicamos vários tutoriais recentemente sobre seus recursos! Neste tutorial, estendemos Está caixa de luz componente adicionando navegação de ponto.

GSAP é uma biblioteca de animação JavaScript popular. Graças ao plug-in Draggable, podemos implementar uma galeria de imagens arrastável que suporta uma galeria lightbox responsiva.

Carrosséis WordPress CodeCanyon e Envato Elements

As coisas não param por aqui! Se você precisa de um carrossel para o seu site WordPress, CodeCanyon e Envato Elements fornecem centenas deles para você escolher.

Se você deseja exibir depoimentos de clientes, suas últimas postagens de blog, suas melhores imagens ou outras mídias em seu site, há um Plugin de controle deslizante do WordPress ou Plugin de controle deslizante de carrossel do WordPress lá fora, isso é certo para você.

Revolução deslizanteRevolução deslizanteRevolução deslizante
Slider Revolution é um dos muitos plugins de slider e carrossel totalmente personalizáveis ​​do WordPress no CodeCanyon e Envato Elements.

Neste post, analisamos os melhores plugins premium da galeria WordPress disponíveis no CodeCanyon, além de listar cinco dos melhores plugins gratuitos. A lista é dividida por tipo de galeria: existem plugins para vídeo e multimídia, imagens e grades do WordPress.

CodeCanyon é o lar dos melhores plugins premium de galeria de imagens e mídia do WordPress para sites.CodeCanyon é o lar dos melhores plugins premium de galeria de imagens e mídia do WordPress para sites.CodeCanyon é o lar dos melhores plugins premium de galeria de imagens e mídia do WordPress para sites.
CodeCanyon é o lar dos melhores plugins premium de galeria de imagens e mídia do WordPress para sites.

Conclusão

Espero que esta lista tenha lhe dado inspiração suficiente para construir seus próprios carrosséis. Aproveite as demos, leia os tutoriais associados e, por último, mas não menos importante, certifique-se de seguir o Envato Tuts+ no CodePen para canetas mais criativas!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *