Por ter sites que ocupam toda a largura da telaDescobrimos que podem ser integrados certos elementos que podem ser úteis para mostrar toda uma amostra de produtos para venda ou as viagens que possamos ter para o verão. Carrosséis ou controles deslizantes são um dos elementos da web que nos permitem mostrar nossos produtos de uma forma visualmente atraente.
Os Sliders, scrollers ou carrosséis gratuitos em CSS que você encontrará a seguir, compõem um bom repertório para todos os tipos de objetivos de trabalho que vamos mostrar ao cliente antes que ele aceite nosso orçamento. É uma coleção de controles deslizantes em HTML e CSS com um pouco de JavaScript no formato horizontal e vertical. Vamos fazer isso para que você possa acessar o código para implementá-los rapidamente.
Carrosséis horizontais
Este carrossel consiste em um animação bem chamativa como se estivéssemos desenhando uma cortina, apenas para diminuir o zoom nas fotos e ícones dos perfis que vamos estabelecer neste controle deslizante. É um carrossel perfeito para depoimentos de usuários que estão muito satisfeitos com os produtos que vendemos na web.
Carrossel infinito responsivo
Este controle deslizante é como a publicidade que às vezes pode ser vista nos campos de futebol nas laterais e exibindo diversos anúncios que rolam horizontalmente. É ideal para páginas de destino que precisam mostrar parceiros de marca e outros tipos de logotipos.
React Carousel
Este pergaminho se destaca por seu React.js. que se presta a exibir imagens em um tamanho proporcional à medida que vamos de uma imagem a outra em uma animação contínua. Pouco mais a dizer sobre este CSS bastante simples, mas de grande efeito se soubermos como posicioná-lo corretamente na web.
Smooth 3D Slider
Composto por HTML, CSS e JavaScript, este carrossel 3D se destaca por sua suavidade e uma animação saltitante com ótimo efeito visual. Com uma série de elementos que identificam cada cartão, um trabalho e um carrossel atraente para incorporá-lo ao seu site.
Carrossel infinito automático
Um controle deslizante que, como seu próprio nome avisa, é exibido automaticamente sem que o usuário tenha que interagir em nenhum momento com ele. As diferentes imagens que compõem este carrossel marcante surgem devido à transição em que ele desaparece magicamente.
Carrossel flutuante
Com o elemento hover, controle deslizante se move da esquerda para a direita, ou vice-versa, deixando o ponteiro do mouse sobre ele. Uma transição suave para mover entre as diferentes fotos que podem compor esse controle deslizante de imagem.
Carrossel Móvel
Também chamado Carousel Material Design, e com a tendência atual com todos os tipos de cartões, aqui você pode encontrar outro artigo com um grande número deles em CSS / HTML, ele se distancia do resto por ser composto pela linguagem de design publicada pelo Google. Você pode mover as diferentes cartas pressionando longamente nas cartas.
Instagram Feed Carousel
Você pode quebrar a ideia por trás deste controle deslizante que se destaca por uma faixa de imagens que pode ser ampliada clicando em um deles. Uma animação de grande efeito, embora seja dirigida a um tipo específico de site. Postagens do Instagram levadas para um carrossel slick.js.
Carrossel sincronizado simples
Tem muito a ver com o anterior, principalmente na faixa de imagens, embora a interação com o controle deslizante é muito diferente movendo-o com um gesto lateral da esquerda para a direita e vice-versa. Novamente, temos slick.js fazendo seu trabalho. Impressionante por seu grande efeito.
Carrosséis horizontais 3D
Um dos carrosséis mais interessantes de toda a lista que publicamos. Destaca-se por seus controles deslizantes horizontais em CSS e HTML que se movem fantasticamente bem. Basta deixar o ponteiro do mouse sobre as caixas para localizar os diferentes efeitos que podem ser produzidos com as quatro variações.
Carrossel CSS
Efeito visual simples e excelente com um série de cartas que se revezam na frente. O efeito é em 3D, por isso é um daqueles controles deslizantes que chamam muita atenção, principalmente devido ao efeito rebote mínimo que mostra a genialidade por parte do criador do mesmo.
Ambilight Bootstrap Carousel
Um controle deslizante simples com ótimo efeito que não se destaca muito. É um dos aqueles controles deslizantes simples que costumamos procurar e que dá aquela sensação de ser um sem muito alarde, mas que cumpre perfeitamente a sua função.
Equipe Carrossel
Se você quiser apresentar a equipe editorial que você tem no blog, este controle deslizante é perfeito em sua função. Bom parecido com o anterior por ser simples. Destaca-se pela utilização de diamantes para alojar cada uma das fotografias da equipa. Possui reprodução automática.
Cubo carrossel
Slider que se destaca por ser um cubo no qual cada um dos rostos é uma das imagens ou fotografias que desejamos exibir em um site. Basta clicar em cada um deles para percorrê-los e descobrir o conteúdo que o espera.
Teclas de seta do carrossel
Um controle deslizante no qual a interação passa usando as setas do teclado. Simples sem muita fanfarra que vai direto para outro tipo de interação, que parece de anos atrás. Para um uso específico.
Carrosséis verticais
Um controle deslizante com um ótimo efeito visual que reproduz automaticamente em uma animação vertical contínua que se destaca pelas cartas com cantos arredondados. Muito atual e um dos que mais se destaca em toda a lista.
Carrossel de puro CSS
Este carrossel se destaca por ter um menu lateral do qual podemos ir clicando em cada uma de suas opções. A informação aparece com um efeito rebote bem alcançado, sem muito mais do que o que foi dito.
Carrossel vertical reage
Igual a anterior por sua verticalidade, embora este controle deslizante seja capaz de ocupar toda a largura da página para mostrar as imagens de cada uma de suas guias. Interessante pelo seu grande formato e pelo uso de transições CSS para deslizar entre os slides.
Carrossel 3D Split
Excelente efeito visual com um padrão de controles deslizantes que gira em 3D com uma animação muito marcante. Você pode selecionar cada uma das opções no menu do lado esquerdo com pontos para cada uma delas. Um dos melhores da lista por ser criativo.
Bom dia, Quero usar o Pure CSS Carousel no meu site, mas ele fica em apenas uma posição, como posso fazer para que fique localizado na posição que desejo dentro da minha página.
Por favor, sua ajuda com isso. Muito obrigado
Como posso fazer com que o carrossel Hover seja bem exibido na versão móvel do meu site?
Excelente, que bom trabalho eles fizeram!
Olá, as carruagens são muito legais, mas assim que faço o upload, copio e colo, o javascrip me dá um erro por causa do var max = $ ('# c> li) .lenght…. O que você está sugerindo