19 deslizantes ou carruseles CSS e HTML para o teu sitio web

deslizadores gratuítos

Ter sitios web que ocupan todo o ancho da pantallaDescubrimos que se poden integrar certos elementos que poden ser útiles para amosar toda unha mostra de produtos á venda ou as viaxes que poidamos ofrecer durante o verán. Os carruseles ou deslizantes son un deses elementos web que nos permiten amosar os nosos produtos dun xeito moi atractivo.

O Deslizadores, scrollers ou carruseles gratuítos en CSS que atoparás a continuación, compón un bo repertorio para todo tipo de obxectivos no traballo que imos amosar ao cliente antes de que acepte o noso orzamento. É unha colección de controles deslizantes en HTML e CSS cun pouco de JavaScript en formato horizontal e vertical. Fagámolo para que poidas acceder ao código para implementalos rapidamente.

Carruseles horizontais

Responsabilidade

Este carrusel consta dun animación bastante chamativa coma se estivesemos debuxando unha cortina, só para afastar as fotos e as iconas dos perfís que imos establecer neste control deslizante. É un carrusel perfecto para testemuños de usuarios que están moi satisfeitos cos produtos que vendemos na web.

Artigo relacionado:
27 deslizadores HTML e CSS para darlle un toque especial ao teu sitio web

Carrusel infinito sensible

Auto-reprodución

Este control deslizante é como a publicidade que ás veces se pode ver nos campos de fútbol dos laterais e amosando diferentes anuncios que se desprazan horizontalmente. É ideal para páxinas de destino que necesitan amosar socios de marca e outro tipo de logotipos.

Carrusel React

Carrusel 3D

Este desprazamento destaca polo seu React.js. que se presta a amosar imaxes nun tamaño proporcionado mentres imos dunha imaxe a outra nunha animación continua. Pouco máis que dicir sobre este CSS bastante sinxelo, pero de gran efecto se sabemos posicionalo correctamente na web.

Deslizador 3D liso

Carrusel 3D

Composto por HTML, CSS e JavaScript, este carrusel 3D destaca pola súa suavidade e unha animación rebotante cun gran efecto visual. Cunha serie de elementos que identifican cada tarxeta, un traballo e un atractivo carrusel para incorporalo á túa páxina web.

Artigo relacionado:
46 Deslizadores e desprazamentos Javascript

Carrusel infinito automático

Carrusel infinito

Un control deslizante que, como advirte o seu propio nome, móstrase automaticamente sen que o usuario teña que interactuar en ningún momento con el. As diferentes imaxes que compoñen este rechamante carrusel aparecen debido á transición na que se esvaece máxicamente.

Carrusel sobrevolado

Carrusel sobrevolado

Co elemento hover isto o control desprazable móvese de esquerda a dereitaou viceversa, mentres deixamos o punteiro do rato sobre el. Unha transición suave para moverse entre as diferentes fotos que poden compoñer este control deslizante de imaxe.

Carrusel móbil

Carrusel móbil

tamén chamado Deseño de Material de Carrusel, e coa tendencia actual con todo tipo de cartas, aquí podes atopar outro artigo cun gran número deles en CSS / HTML, distánciase do resto porque está composto pola linguaxe de deseño publicado por Google. Podes mover as distintas cartas premendo longamente nas tarxetas.

Carrusel de feed de Instagram

Instagram

Podes frear a idea detrás deste control deslizante por unha tira de imaxes que se poden ampliar premendo nun deles. Unha animación de gran efecto, aínda que está dirixida a un tipo específico de sitio web. Publicacións de Instagram levadas a un carrusel slick.js.

Carrusel sincronizado simple

Carrusel sinxelo

Ten moito que ver coa anterior, especialmente na tira de imaxes, aínda que a interacción co control deslizante é moi diferente movéndoo cun xesto lateral de esquerda a dereita e viceversa. De novo temos slick.js facendo o seu. Chamando a atención polo seu gran efecto.

Carruseles horizontais en 3D

Carrusel horizontal 3D

Un dos carruseles máis interesantes de toda a lista que publicamos. Destaca por os seus controles deslizantes horizontais en CSS e HTML que se moven fantásticamente ben. Só tes que deixar o punteiro do rato sobre as caixas para atopar os diferentes efectos que se poden producir coas catro variacións.

Carrusel CSS

CSS 3D

Efecto visual sinxelo e estupendo con serie de cartas que se turnan na parte dianteira. O efecto está en 3D, polo que é un deses controles deslizantes que chaman moito a atención, especialmente debido ao efecto rebote mínimo que mostra xenio por parte do creador do mesmo.

Carrusel Ambilight Bootstrap

Carrusel Bootstrap

Un control deslizante simple con gran efecto que non destaca por moito. É un dos eses simples controles deslizantes que adoitamos buscar e que dá esa sensación de ser un sen grandes alardes, pero que cumpre perfectamente a súa función.

Equipo de carrusel

Equipo de carrusel

Se queres presentar o equipo editorial que tes no blog, este control deslizante é perfecto no seu papel. Ben semellante ao anterior polo sinxelo que é. Destaca polo uso de diamantes para albergar cada unha das fotografías do equipo. Ten reprodución automática.

Cubo de carrusel

Cubo 3d

Deslizante que destaca por ser un cubo no que cada unha das caras é unha das imaxes ou fotografías que queremos amosar nun sitio web. Só tes que facer clic sobre cada un deles para desprazalos e descubrir que contido te espera.

Teclas de frecha en carrusel

Claves CSS

Un control deslizante no que transcorre a interacción usando as teclas de frecha. Sinxelo sen moita fanfarria que vai directamente a outro tipo de interacción, que parece hai anos. Para un uso específico.

Carruseles verticais

Carrusel vertical

Un control deslizante cun gran efecto visual que reproduce automaticamente nunha animación vertical continua que destaca polas súas cartas con esquinas redondeadas. Moi actual e un dos que destaca por si só de toda esta lista.

Carrusel CSS puro

Carrusel

Este carrusel destaca por ter un menú lateral desde o que podemos ir premendo en cada unha das súas opcións. A información aparece cun efecto rebote ben conseguido sen moito máis do que se dixo.

O carrusel vertical reacciona

Carrusel

Semellante a anterior pola súa verticalidade, aínda que este control deslizante é capaz de levar todo o ancho da páxina para amosar as imaxes de cada unha das súas pestanas. Interesante polo seu gran formato e o uso de transicións CSS para desprazarse entre diapositivas.

Carrusel dividido en 3D

división

Gran efecto visual cun patrón de control deslizante que xira en 3D con unha animación moi rechamante. Cada unha das opcións pódese seleccionar no menú lateral esquerdo con puntos para cada unha delas. Un dos mellores da lista polo creativo que é.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

4 comentarios, deixa os teus

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   Mayra orellana dixo

    Bos días, quero usar Pure CSS Carousel no meu sitio, pero só se atopa nunha posición, como podo facer que estea na posición que desexo dentro da miña páxina.

    Por favor, a túa axuda con isto. Moitas grazas

  2.   Xavier Cañizares dixo

    Como podo facer que o carrusel Hover se amose ben na versión móbil do meu sitio web?

  3.   Gabriel dixo

    Excelente, que bo traballo fixeron!

  4.   tony zambrano dixo

    Ola, as casas de transporte son moi chulas, pero en canto o subo, copio e pego, o javascrip dame un erro por mor do var max = $ ('# c> li) .lenght ... Que estás suxerindo