En tenir llocs web que prenen tot l'ample de la pantalla, Trobem que es pot integrar certs elements que poden venir molt bé per exposar tot un mostrari de productes en venda o els viatges que puguem tenir en oferta per a l'estiu. Els carrusels o sliders són un d'aquests elements web que permeten mostrar els nostres productes de forma bastant cridanera en el visual.
Els sliders, scrollers o carrusels gratuïts en CSS que trobareu a continuació, conformen un bon repertori per a tot tipus d'objectius en el treball que anem a mostrar als el client abans que accepti el nostre pressupost. És una col·lecció de sliders en HTML i CSS amb una mica de JavaScript tant en format horitzontal com en vertical. Anem a això perquè pugueu accedir a el codi implementar ràpidament.
carrusels horitzontals
Aquest carrusel consta d'una animació bastant cridanera com si estiguéssim corrent una cortina, per just hazer un zoom out per les fotos i icones dels perfils que anem a instaurar en aquest slider. És un carrusel perfecte per testimonis d'usuaris que es troben molt satisfets amb els productes que venguem a la web.
Carrusel infinit responsive
Aquest slider és com la publicitat que de vegades es pot veure en els camps de futbol en els laterals i que mostra diferents anuncis que es desplacen de forma horitzontal. És ideal per landing pages que necessiten mostrar els socis de marques i altres tipus de logos.
Carrusel React
aquest scroll destaca per la seva React.js. que es presta a mostrar les imatges a una mida proporcionat segons anem passant d'una imatge a una altra en una contínua animació. Poc més a dir sobre aquest CSS bastant simple, però de gran efecte si sabem situar-la adequadament a la web.
Slider 3D Suau
Compost per HTML, CSS i JavaScript, aquest carrusel 3D destaca per la seva suavitat i una animació de rebot de gran efecte visual. Amb un seguit d'elements que identifiquen cada targeta, un treball i cridaner carrusel per incorporar ja en el teu lloc web.
Carrusel infinit automàtic
Un slider que com el seu propi nom avisa, es mostra de forma automàtica sense que l'usuari hagi d'interactuar en cap moment amb ell. Van apareixent les diferents imatges que componen aquest carrusel cridaner per la transició en què s'esvaeix per art de màgia.
hover Carousel
Amb l'element hover aquest slider es mou d'esquerra a dreta, O viceversa, segons anem deixant el punter de l'ratolí a sobre d'ell mateix. Una suau transició per transitar entre les diferents fotografies que poden compondre aquest slider d'imatges.
Carrusel Mobile
També anomenat Carrusel Material Design, I amb la tendència actual amb tot tipus de targetes, aquí podeu trobar un altre article amb un gran nombre d'elles en CSS / HTML, Es distancia de la resta per estar compost pel llenguatge de disseny publicat per Google. Pots moure les diferents targetes a l'prémer llarg sobre les targetes.
Instagram Feed Carrusel
Pot xocar la idea darrere d'aquest slider que destaca per una tira d'imatges que poden ser ampliades a l'prémer en una d'elles. Una animació de gran efecte, encara que aquest adreçada per a un tipus de web en concret. Publicacions d'Instagram portades a un carrusel slick.js.
Carrusel simple sincronitzat
Té molt a veure amb l'anterior, sobretot en la tira d'imatges, encara que la interacció amb el slider és ben diferent a l'desplaçar-lo amb un gest lateral d'esquerra a dreta i viceversa. De nou tenim a slick.js fent de les seves. Cridaner per la seva gran efecte.
3D carrusels horitzontals
Un dels carrusels més interessants de tota la llista que publiquem. destaca per seus sliders horitzontals en CSS i HTML que es mouen fantàsticament bé. Només has de deixar el punter de l'ratolí sobre les caixes per trobar els diferents efectes que es poden produir amb les quatre variacions.
CSS Carrusel
Simple i de gran efecte visual amb una sèrie de targetes que es van alternant a la part frontal. L'efecte és en 3D, així que és un d'aquells sliders que criden molt l'atenció, sobretot pel mínim efecte de rebot que mostra geni per part de l'creador d'aquest.
Ambilight Bootstrap Carrusel
Un simple slider amb gran efecte que no destaca per molt. És un aquests sliders simples que solem buscar i que brinda aquesta sensació de ser un sense molts ostentacions, però que compleix perfectament la seva funció.
equip Carrusel
Si vols presentar a l'equip editorial que tens al bloc, aquest slider és perfecte en la seva comesa. Bé semblant a l'anterior per el simple que és. Destaca per l'ús de rombes per albergar cadascuna de les fotografies de l'equip. Té reproducció automàtica.
Carrusel Cub
Slider que destaca per ser una galleda en el qual cadascuna de les cares és una de les imatges o fotografies que volem mostrar en un lloc web. Només has de fer clic en cadascuna d'elles per desplaçar-les i esbrinar així el contingut que t'espera.
Carrusel tecles de direcció
Un slider en el qual la interacció passa per l'ús de les tecles de direcció. Simple sense molts ostentacions que va directament a un altre tipus d'interacció, una que sembla de fa anys. Per a un ús en determinat.
carrusels verticals
Un slider de gran efecte visual que es reprodueix automàticament en una contínua animació vertical que destaca per les seves targetes amb cantonades arrodonides. Molt actual i un dels que destaca per si sol de tota aquesta llista.
Pure CSS Carrusel
Aquest carrusel destaca per tenir un menú lateral des del qual podem anar prement en cadascuna de les seves opcions. La informació apareix amb un efecte de rebot ben aconseguit sense molt més que el que s'ha dit.
Carrusel vertical react
Similar a l' anterior per la seva verticalitat, Encara que aquest slider és capaç de prendre tot l'ample de la pàgina per mostrar les imatges de cadascuna de les seves pestanyes. Interessant per la seva gran format i l'ús de transicions CSS per lliscar entre els slides.
3D Split Carrusel
D'un gran efecte en el visual amb un patró de sliders que va girant en 3D amb una animació molt cridanera. Es pot seleccionar cadascuna de les opcions des del menú lateral esquerre amb punts per a cadascuna d'elles. Un dels millors de la llista per el creatiu que és.
Bon dia, vull utilitzar Pure CSS Carrusel al meu lloc, però s'ubica en una sola posició, com puc fer perquè s'ubiqui en la posició que jo vull dins de la meva pàgina.
Si us plau la seva ajuda amb esto.Muchas gràcies
com puc fer perquè Hover Carousel es pugui visualitzar bé en la versió mòbil de la meva pagina web
Excel·lent, ¡que bona feina van realitzar!
hola divertits els carrouseles, però quan ho pujo copio i pego em emet erro el javascrippor la var max = $ ( '# c> lit) .lenght .... que em suggereixes