19 skuifbande of karrousels CSS en HTML vir u webwerf

Deur te hê webwerwe wat die hele breedte van die skerm inneemOns het gevind dat sekere elemente geïntegreer kan word wat handig te pas kan kom om 'n hele reeks produkte wat te koop is, of die reise wat ons vir die somer kan aanbied, te vertoon. Karussels of skuifblaaie is een van die webelemente wat ons toelaat om ons produkte op 'n baie opvallende manier te wys.

Die Gratis skuifblaaie, blaaiers of karusse in CSS wat u hieronder sal vind, moet u 'n goeie repertorium opstel vir allerhande doelstellings by die werk wat ons aan die kliënt gaan wys voordat hulle ons begroting aanvaar. Dit is 'n versameling skuifblaaie in HTML en CSS met 'n bietjie JavaScript in beide horisontale en vertikale formaat. Laat ons dit doen sodat u vinnig toegang tot die kode kan kry en vinnig kan implementeer.

Horisontale karusse

Hierdie karrousel bestaan ​​uit 'n redelik spoggerige animasie asof ons 'n gordyn trek, om net uit te zoem vir die foto's en ikone van die profiele wat ons in hierdie skuifbalk gaan opstel. Dit is 'n perfekte karrousel vir getuigskrifte van gebruikers wat baie tevrede is met die produkte wat ons op die internet verkoop.

Verwante artikel:

27 HTML- en CSS-skuifblaaie om u webwerf daardie spesiale aanraking te gee

Responsiewe oneindige karrousel

Hierdie skuif is soos die advertensies wat soms gesien kan word op die sokkervelde aan die kante en verskillende advertensies wat horisontaal blaai, vertoon. Dit is ideaal vir bestemmingsbladsye wat handelsvennote en ander soorte logo's moet vertoon.

Reageer Carousel

Hierdie boekrol staan ​​uit vir sy React.js. wat hom daartoe leen om beelde op 'n proporsionele grootte te vertoon terwyl ons van een beeld na 'n ander in 'n deurlopende animasie gaan. Weinig meer te sê oor hierdie redelik eenvoudige CSS, maar van groot effek as ons weet hoe om dit behoorlik op die internet te plaas.

Gladde 3D-skuifbalk

Hierdie 3D-karrousel, saamgestel uit HTML, CSS en JavaScript, staan ​​uit vir sy gladheid en 'n weerkaatsende animasie met 'n groot visuele effek. Met 'n reeks elemente wat elke kaart identifiseer, 'n taak en 'n opvallende karrousel om dit op u webwerf te verwerk.

Verwante artikel:

46 Javascript-skuifblaaie en -rollers

Outomatiese oneindige karrousel

'N Skuifbalk wat, soos sy eie naam waarsku, outomaties vertoon word sonder dat die gebruiker hoef te kommunikeer in geen tyd saam met hom nie. Die verskillende beelde waaruit hierdie opvallende karrousel bestaan, verskyn as gevolg van die oorgang waarin dit magies vervaag.

Hover Carrousel

Met die sweefelement hierdie skuifbalk beweeg van links na regs, of andersom, as ons die muisaanwyser daaroor laat. 'N Soepele oorgang om tussen die verskillende foto's te beweeg wat hierdie beeldskuif kan saamstel.

Mobiele karrousel

ook Carousel Material Design genoem, en met die huidige tendens met allerlei kaarte, hier kan u 'n ander artikel met 'n groot aantal in CSS / HTML vind, distansieer hom van die res omdat dit bestaan ​​uit die ontwerpstaal wat deur Google gepubliseer word. U kan die verskillende kaarte skuif deur die kaarte lank in te druk.

Instagram Feed Carousel

U kan die idee agter hierdie beklemtoon-skuifbalk laat val deur 'n strook beelde wat vergroot kan word deur op een daarvan te klik. 'N Animasie met groot effek, alhoewel dit op 'n spesifieke tipe webwerf gerig is. Instagram-plasings na 'n slick.js-karousel geneem.

Eenvoudige gesinkroniseerde karrousel

Dit het baie met die vorige te doen, veral in die strook beelde, hoewel die interaksie met die skuifbalk is baie anders deur dit met 'n sybeweging van links na regs te skuif en andersom. Weer het ons dat slick.js sy ding doen. Opvallend vir sy groot effek.

3D horisontale karusse

Een van die interessantste karusse op die volledige lys wat ons publiseer. Staan uit vir u horisontale skuifblaaie in CSS en HTML dit beweeg fantasties goed. U hoef slegs die muiswyser oor die bokse te laat om die verskillende effekte wat met die vier variasies geproduseer kan word, te vind.

CSS-karrousel

Eenvoudige en groot visuele effek met 'n reeks kaarte wat beurte maak vooraan. Die effek is in 3D, dus dit is een van die skuifblaaie wat baie aandag trek, veral vanweë die minimale rebound-effek wat die skepper van dieselfde genialiteit toon.

Ambilight Bootstrap-karrousel

'N Eenvoudige skuifbalk met 'n groot effek wat nie veel uitstaan ​​nie. Is een van daardie eenvoudige glyers waarna ons gewoonlik soek en wat die gevoel gee om een ​​te wees sonder veel fanfare, maar wat sy funksie perfek vervul.

Karouselspan

As u die redaksiespan op die blog wil voorstel, hierdie skuifbalk is perfek in sy rol. Goed soortgelyk aan die vorige vir hoe eenvoudig dit is. Dit val op die gebruik van diamante om elkeen van die span se foto's te huisves. Dit het outomatiese terugspeel.

Carousel Cube

Skuifbalk wat uitstaan ​​as 'n kubus waarin elk van die gesigte is een van die beelde of foto's wat ons op 'n webwerf wil vertoon. U hoef net op elkeen te klik om deur hulle te blaai en uit te vind watter inhoud op u wag.

Karusselpyltjies

'N Skuifbalk waarin die interaksie deurgaan met behulp van die pyltjies. Eenvoudig sonder veel fanfare wat direk na 'n ander tipe interaksie gaan, een wat soos jare gelede lyk. Vir 'n spesifieke gebruik.

Vertikale karusse

'N Skuifbalk met 'n groot visuele effek wat speel outomaties in 'n deurlopende vertikale animasie wat uitstaan ​​vir sy kaarte met afgeronde hoeke. Baie aktueel en een van die wat uit hierdie hele lys op sigself staan.

Suiwer CSS-karrousel

Hierdie karrousel staan ​​uit omdat hy 'n kant menu waaruit ons kan gaan deur op elkeen van die opsies te klik. Die inligting verskyn met 'n goed bereikte rebound-effek sonder veel meer as wat gesê is.

Vertikale karrousel reageer

Soortgelyk aan vorige vir sy vertikaliteit, alhoewel hierdie skuifbalk die hele breedte van die bladsy kan neem om die prente van elk van die oortjies te wys. Interessant vir sy groot formaat en die gebruik van CSS-oorgange om tussen skyfies te skuif.

3D gesplete karrousel

Groot visuele effek met 'n skuifpatroon wat in 3D draai 'n baie treffende animasie. U kan elk van die opsies uit die menu aan die linkerkant kies met kolletjies vir elkeen daarvan. Een van die beste op die lys vir hoe kreatief dit is.