19 controles deslizantes ou carrosséis CSS e HTML para seu site

controles deslizantes grátis

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

responsivo

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.

Controle deslizante de cupcake
Artigo relacionado:
27 controles deslizantes de HTML e CSS para dar ao seu site um toque especial

Carrossel infinito responsivo

Auto-reprodução

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

Carrossel 3D

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

Carrossel 3D

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.

Artigo relacionado:
46 Sliders e Scrollers Javascript

Carrossel infinito automático

Carrossel infinito

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

Hover Carousel

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

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

Instagram

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

Carrossel 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

Carrossel 3D Horizontal

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

CSS 3D

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

Carrossel Bootstrap

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

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

Cubo 3d

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

Chaves CSS

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

Carrossel vertical

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

Carrossel

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

Carrossel

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

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.


Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios são marcados com *

*

*

  1. Responsável pelos dados: Miguel Ángel Gatón
  2. Finalidade dos dados: Controle de SPAM, gerenciamento de comentários.
  3. Legitimação: Seu consentimento
  4. Comunicação de dados: Os dados não serão comunicados a terceiros, exceto por obrigação legal.
  5. Armazenamento de dados: banco de dados hospedado pela Occentus Networks (UE)
  6. Direitos: A qualquer momento você pode limitar, recuperar e excluir suas informações.

  1.   Mayra orellana dito

    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

  2.   Xavier Canizares dito

    Como posso fazer com que o carrossel Hover seja bem exibido na versão móvel do meu site?

  3.   Gabriel dito

    Excelente, que bom trabalho eles fizeram!

  4.   Tony Zambrano dito

    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