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+.
9 Tutoriais de carrossel de CSS e JavaScript
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.
2. Carrossel Vanilla JavaScript (14 Linhas de Código!)
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.
5. Galeria de imagens responsiva com slick.js
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.
7. Galeria de Lightbox do Bootstrap Responsivo
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.
8. Galeria de Lightbox do UIkit responsivo
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.
9. Galeria de imagens arrastável e uma caixa de luz personalizada com GSAP
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.
21 melhores plugins de slider e carrossel do WordPress de 2022
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ê.
21 melhores plugins de galeria do WordPress para 2022
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.
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!
