19 graduatzaile edo karusel CSS eta HTML zure webgunerako

Izanez pantailaren zabalera osoa hartzen duten webguneakAurkitu genuen zenbait produktu integratu daitezkeela, salgai dauden produktuen lagin oso bat edo udan eskaintzeko izan ditzakegun bidaiak erakusteko. Karruselak edo graduatzaileak gure produktuak modu bisualean erakustea ahalbidetzen diguten web elementu horietako bat dira.

The Doako graduatzaileak, scrollers edo karruselak CSSn Jarraian aurkituko dituzunak, gure aurrekontua onartu aurretik bezeroari erakutsiko dizkiogun lan mota guztietako errepertorio ona osatzen dute. HTML eta CSS irristailuen bilduma da, JavaScript pixka batekin formatu horizontalean zein bertikalean. Egin egingo dugu, azkar sartu ahal izateko kodea atzitu ahal izateko.

Karrusel horizontalak

Karrusel hau a-k osatzen du nahiko animazio distiratsua Gortina bat marrazten ariko bagina bezala, graduatzaile honetan ezarriko ditugun profilen argazkiak eta ikonoak txikiagotzeko. Sarean saltzen ditugun produktuekin oso pozik dauden erabiltzaileen testigantzetarako karrusel ezin hobea da.

Lotutako artikulua:

27 HTML eta CSS graduatzaileak zure webguneari ukitu berezi hori emateko

Karrusel infinitu sentikorra

Irristailu hau da batzuetan ikus daitekeen publizitatea bezala alboetako futbol zelaietan eta horizontalki korritzen duten iragarki desberdinak erakutsiz. Ezin hobea da marka bazkideei eta beste logotipo mota batzuk erakutsi behar dituzten lurreratze orrietarako.

Erreakzionatu karrusela

Korritze hau nabarmentzen da React.js delakoagatik. hori irudiak tamaina proportzionalean bistaratzen uzten du animazio jarrai batean irudi batetik bestera goazen heinean. Ezer gutxi gehiago esateko CSS nahiko sinple honi buruz, baina eragin handia du sarean behar bezala kokatzen badakigu.

3D irristailu leuna

HTML, CSS eta JavaScript-ek osatua, 3D karrusel hau bere leuntasunagatik eta oso ikusizko errebote animazioa. Karta bakoitza identifikatzen duten hainbat elementurekin, obra batekin eta erakargarri den karruselarekin zure webgunean sartzeko.

Lotutako artikulua:

46 Javascript graduatzaileak eta korritzaile

Karrusel infinitu automatikoa

Bere izenak ohartarazten duen graduatzailea automatikoki bistaratzen da erabiltzaileak elkarreragin beharrik izan gabe berarekin denbora gutxian. Karrusel deigarri hau osatzen duten irudi desberdinak magikoki desagertzen den trantsizioaren ondorioz agertzen dira.

Pasa ezazu Karrusela

Hover elementu honekin graduatzailea ezkerretik eskuinera mugitzen da, edo alderantziz, saguaren erakuslea gainean uzten dugun bitartean. Irudi graduatzailea osa dezaketen argazki desberdinen artean mugitzeko trantsizio leuna.

Mugikorreko karrusela

Era berean, Carrusel Material Design izenekoa, eta egungo joerarekin mota guztietako kartekin, Hemen beste artikulu bat aurki dezakezu CSS / HTML atalean, gainerakoengandik aldentzen da, Google-k argitaratutako diseinu lengoaiaz osatuta dagoelako. Karta desberdinak kartetan luze sakatuta mugi ditzakezu.

Instagram jarioaren karrusela

Nabarmentzen den graduatzaile honen atzean dagoen ideia huts egin dezakezu handitu daitekeen irudi zerrenda baten bidez horietako batean klik eginez. Efektu handiko animazioa, nahiz eta webgune mota jakin baterako zuzendu. Instagrameko mezuak slick.js karrusel batera eramanda.

Karrusel sinkronizatu sinplea

Aurrekoarekin zerikusi handia du, batez ere irudi zerrendan, baina graduatzailearekiko elkarrekintza oso desberdina da alboko keinu batez ezkerretik eskuinera eta alderantziz mugituz. Berriro ere slick.js dugu bere lana egiten. Deigarria bere efektu handiagatik.

3D karrusel horizontalak

Argitaratzen dugun zerrenda osoko karrusel interesgarrienetako bat. Nabarmentzen da zure graduatzaile horizontalak CSS eta HTML formatuan izugarri ondo mugitzen direnak. Saguaren erakuslea koadroen gainean utzi besterik ez duzu lau aldakuntzekin sor daitezkeen efektu desberdinak aurkitzeko.

CSS karrusela

Ikusizko efektu sinplea eta bikaina txandaka egiten duten karta sorta aurrealdean. Efektua 3Dan dago, beraz, arreta handia erakartzen duen graduatzaile horietako bat da, batez ere horren sortzailearen jeinua erakusten duen errebote efektu minimoagatik.

Ambilight Bootstrap Carousel

Askorentzat nabarmentzen ez den efektu handiko graduatzailea. Bat da graduatzaile soil horiek normalean bilatzen duguna eta horrek zalaparta handirik gabeko sentimendu hori ematen duela, baina horrek bere funtzioa ezin hobeto betetzen duela.

Karrusel taldea

Blogean duzun erredakzio taldea aurkeztu nahi baduzu, graduatzaile hau ezin hobea da bere rolean. Aurrekoaren antzekoa, oso erraza baita. Taldeko argazki bakoitza gordetzeko diamanteak erabiltzeagatik nabarmentzen da. Erreprodukzio automatikoa du.

Karrusel Kuboa

Kubo bat izateagatik nabarmentzen den graduatzailea aurpegi bakoitza irudietako bat da edo webgune batean erakutsi nahi ditugun argazkiak. Horietako bakoitzaren gainean klik egitea besterik ez duzu korritu eta zer eduki zain zauden jakiteko.

Karrusel geziak

Elkarreragina zeharkatzen duen graduatzailea geziak erabiliz. Sinplea zalaparta handirik gabe, beste elkarreragin mota batera joaten dena, duela urte batzuk dirudiena. Erabilera zehatz baterako.

Karrusel bertikalak

Efektu bisual handia duen graduatzailea automatikoki erreproduzitzen du etengabeko animazio bertikalean izkin biribilduekin dituen kartengatik nabarmentzen dena. Oso egungoa eta zerrenda oso honetatik bere kabuz nabarmentzen den horietakoa.

CSS karrusel hutsa

Karrusel hau a izateagatik nabarmentzen da alboko menua bertatik joan gaitezke bere aukera bakoitzean klik eginez. Informazioa ondo lortutako errebote efektuarekin agertzen da esandakoa baino askoz ere gehiago gabe.

Karrusel bertikalak erreakzionatzen du

Antzekoa aurrekoak bere bertikaltasunagatik, graduatzaile hau orriaren zabalera osoa hartzeko gai den arren bere fitxa bakoitzaren irudiak erakusteko. Interesgarria formatu handian eta CSS trantsizioen erabileran diapositiben artean irristatzeko.

3D zatitutako karrusela

Efektu bisual bikaina 3D-rekin biratzen duen graduatzaileen ereduarekin animazio oso deigarria. Aukera bakoitza ezkerreko menuan hauta dezakezu haietako bakoitzarentzako puntuekin. Zerrendako onenetarikoa, sormena duen aldetik.