19 graduatzaile edo karusel CSS eta HTML zure webgunerako

doako graduatzaileak

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

Sentikorrena

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

Auto-erreprodukzioa

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

3D 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

3D karrusela

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

Karrusel infinitua

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

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

Karrusel mugikorra

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

Instagram

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

Karrusel 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

3D karrusel horizontala

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

CSS 3D

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

Bootstrap karrusela

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

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

3d kubo

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

CSS gakoak

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

Karrusel bertikala

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

kanpainan

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

kanpainan

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

Split

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.


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

4 iruzkin, utzi zurea

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.

  1.   Mayra orellana esan zuen

    Egunon, Pure CSS karusela erabili nahi dut nire webgunean, baina posizio bakarrean dago. Nola egin dezaket nire orrialdean nahi dudan posizioan kokatzeko.

    Mesedez, zure laguntza. Eskerrik asko

  2.   Xavier Canizares esan zuen

    Nola egin dezaket Hover Carousel ondo bistaratzeko nire webguneko bertsio mugikorrean?

  3.   Gabriel esan zuen

    Bikaina, zer lan ona egin duten!

  4.   Tony Zambrano esan zuen

    Kaixo, bagoi etxeak oso atseginak dira, baina igo bezain laster, kopiatu eta itsatsi egiten dut, javascrip-ek errore bat ematen dit var max = $ ('# c> li) .lenght delako ... Zer iradokitzen ari zara