19 gratis HTML- en CSS-skuifblaaie vir u webwerf Kreatiewe aanlyn
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.
1 Horisontale karusse
2 Responsiewe oneindige karrousel
3 Reageer Carousel
4 Gladde 3D-skuifbalk
5 Outomatiese oneindige karrousel
7 Mobiele karrousel
9 Eenvoudige gesinkroniseerde karrousel
10 3D horisontale karusse
12 Ambilight Bootstrap-karrousel
16 Vertikale karusse
17 Suiwer CSS-karrousel
18 Vertikale karrousel reageer
19 3D gesplete karrousel
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.
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.
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.
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.
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.
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.
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.
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.
'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.
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.
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.
'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.
'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.
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.
Volledige pad na artikel: Aanlyn kreatiewe » tegnologie » CSS » 19 skuifbande of karrousels CSS en HTML vir u webwerf
Goeiemôre, ek wil Pure CSS Carousel op my werf gebruik, maar dit is net in een posisie, hoe kan ek dit op die posisie plaas wat ek op my bladsy wil hê?
Asseblief u hulp hiermee. Baie dankie
Antwoord op Mayra Orellana
Hoe kan ek Hover Carousel goed laat vertoon op die mobiele weergawe van my webwerf?
Antwoord op Xavier Cañizares
Uitstekend, wat 'n goeie werk het hulle gedoen!