Interessado em construir um carrossel, mas não sabe por onde começar? Você está no lugar perfeito; hoje exploraremos os melhores tutoriais de carrossel CSS e JavaScript disponíveis no Envato Tuts+.
Para que serve um carrossel em um site?
Os carrosséis são frequentemente encontrados nas primeiras páginas de sites, onde atendem a diversos propósitos, que vão desde aprimoramento estético até entrega de conteúdo funcional.
Aqui estão algumas maneiras de encontrá-los em uso:
-
Para destacar o conteúdo principal: Os carrosséis são excelentes para chamar a atenção para itens ou recursos específicos. Por exemplo, um site de comércio eletrônico pode usar um carrossel para destacar produtos mais vendidos, ofertas especiais ou novidades.
-
Para otimizar o espaço: Eles fornecem uma solução para o desafio do espaço limitado. Ao girar o conteúdo, os carrosséis permitem apresentar mais informações em uma área compacta, evitando que os usuários rolem excessivamente.
-
Para aumentar o envolvimento do usuário: A natureza dinâmica dos carrosséis pode tornar um site mais interativo e visualmente atraente. Essa interatividade pode aumentar o engajamento do usuário, incentivando os visitantes a passarem mais tempo no site.
-
Para narrativa e conteúdo sequencial: Os carrosséis também podem ser usados para contar uma história ou apresentar informações sequenciais, como um guia passo a passo ou uma série de artigos relacionados, de forma organizada e visualmente atraente.
Agora vamos ao nosso resumo de alguns tutoriais de carrossel CSS JS favoritos disponíveis no Envato Tuts+.
10 tutoriais de carrossel CSS e JavaScript
Desde tutoriais que explicam como usar o componente carrossel Bootstrap, até vários carrosséis JavaScript e bibliotecas de apresentações de slides, até instruções sobre como codificar as coisas sozinho do zero, temos tudo no Tuts+! Vamos explorar alguns tutoriais fáceis de seguir e de alto desempenho para criar um carrossel em CSS:
1. Apresentação de slides CSS puro
Você sabia que pode criar uma apresentação de slides somente com CSS?
A demonstração abaixo mostra como fazer isso aproveitando as vantagens da 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 apresenta 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 Vanilla JavaScript
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 JavaScript oferece suporte a algumas opções de personalização para o Reprodução automática modo também.
4. Controle deslizante responsivo com Owl.js
Este tutorial ensina como usar Owl.js (uma biblioteca JavaScript muito popular) para construir um controle deslizante de tela inteira.
Indo um pouco mais 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, este tutorial do carrossel de controles deslizantes 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, então use-a com cuidado.
5. Galeria de imagens responsiva com slick.js
Neste exercício, estamos usando o 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 imagem em destaque ou nem aparecem.
Para criar esse efeito, configuramos dois carrosséis independentes e os sincronizamos, graças ao recurso de sincronização do slick.
6. Controle deslizante responsivo com Swiper.js
Swiper.js é outra opção conhecida para construir carrosséis JavaScript complexos. Neste exercício, incorporaremos um controle deslizante swiper.js como parte de um layout assimétrico.
7. Como construir um controle deslizante de imagem responsivo com Swiper.js (tutorial em vídeo)
Mais Swiper.js para você, porque é que bom. Assista a Adi Purdila enquanto ele demonstra como construir alguns carrosséis Swiper diferentes neste tutorial em vídeo. Não se esqueça de se inscrever no canal Tuts+ no YouTube para muito mais como esse!
8. Galeria Lightbox Bootstrap responsivo
Você deve estar familiarizado com Bootstrap, a estrutura de desenvolvimento front-end mais popular. Neste exercício, estendemos sua funcionalidade construindo uma galeria lightbox.
Na verdade, não estamos construindo nada de novo. Estamos apenas personalizando e combinando componentes existentes do Bootstrap.
Este tutorial é uma opção sólida de carrossel HTML CSS.
9. Galeria UIkit Lightbox responsiva
UIkit é outro framework front-end modular, e recentemente publicamos vários tutoriais sobre seus recursos! Neste tutorial, estendemos isso é mesa de luz componente adicionando navegação por pontos.
10. Galeria de imagens arrastáveis e lightbox personalizado com GSAP
GSAP é uma biblioteca popular de animação JavaScript. Graças ao seu plugin Draggable, somos capazes de implementar uma galeria de imagens arrastáveis que suporta uma galeria lightbox responsiva. Então, se você procura um carrossel animado, este tutorial pode atender às suas necessidades.
Carrosséis WordPress CodeCanyon e Envato Elements
As coisas não param por aqui! Se você precisar de um carrossel para o seu site WordPress, ga-analytics#sendMarketClickEvent”>CodeCanyon e ga-analytics#sendElementsClickEvent”>Envato Elements fornecem centenas deles para você escolher.
21 melhores plug-ins de controle deslizante e carrossel para WordPress de 2024
Se você deseja exibir depoimentos de clientes, suas últimas postagens no blog, suas melhores imagens ou outras mídias em seu site, há uma ga-analytics#sendMarketClickEvent”>Plugin de controle deslizante do WordPress ou ga-analytics#sendMarketClickEvent”>Plugin de controle deslizante de carrossel do WordPress lá fora, isso é certo para você.
16 melhores plug-ins de galeria WordPress para 2024
Nesta postagem, analisamos os melhores plug-ins premium de galeria do WordPress disponíveis no CodeCanyon, além de listar cinco dos melhores plug-ins gratuitos. A lista é dividida por tipo de galeria: há plugins para vídeo e multimídia, imagens e grades WordPress.
Conclusão
Esperançosamente, esta lista de tutoriais de controle deslizante de carrossel CSS lhe deu inspiração suficiente para construir seus próprios carrosséis. Aproveite as demonstrações, leia os tutoriais associados e, por último, mas não menos importante, siga Envato Tuts+ no CodePen para canetas mais criativas!
[ad_2]
