Azáltal, hogy a képernyő teljes szélességét elfoglaló webhelyekMegállapítottuk, hogy egyes elemek integrálhatók, amelyek jól jöhetnek az eladható termékek teljes mintájának vagy a nyárra kínált utak teljes megjelenítéséhez. A körhinta vagy a csúszka egyike azoknak a webes elemeknek, amelyek lehetővé teszik számunkra, hogy termékeinket nagyon szemet gyönyörködtető módon mutassuk meg.
sok Ingyenes csúszkák, görgetők vagy körhinta CSS-ben amelyet alább talál, jó repertoárt kínálnak mindenféle munkahelyi célkitűzéshez, amelyeket megmutatunk az ügyfélnek, mielőtt elfogadják a költségvetésünket. Ez egy csúszkagyűjtemény HTML és CSS formában, egy kis JavaScript-rel vízszintes és függőleges formátumban is. Azért fogjuk megtenni, hogy Ön elérhesse a kódot a gyors végrehajtáshoz.
Vízszintes körhinta
Ez a körhinta a elég mutatós animáció mintha függönyt húznánk, hogy csak kicsinyítsük azokat a profilok fotóit és ikonjait, amelyeket ebben a csúszkában fogunk létrehozni. Ez egy tökéletes körhinta azoknak a felhasználóknak az ajánlásaihoz, akik nagyon elégedettek az általunk az interneten értékesített termékekkel.
Reszponzív végtelen körhinta
Ez a csúszka az mint a néha látható reklám az oldalsó futballpályákon, és vízszintesen görgethető különféle hirdetéseket jelenít meg. Ideális olyan nyitóoldalakhoz, ahol márkapartnereket és más típusú logókat kell bemutatni.
Reagáljon körhintát
Ez a tekercs kiemelkedik React.js-jével. Ez alkalmas arra, hogy a képeket arányos méretben jelenítsük meg, miközben folyamatosan haladunk egyik képről a másikra. Kevesebb mondanivaló erről a meglehetősen egyszerű CSS-ről, de nagy hatással van, ha tudjuk, hogyan helyesen helyezzük el az interneten.
Sima 3D csúszka
A HTML-ből, CSS-ből és JavaScript-ből álló 3D-s körhinta sima és rendkívül vizuálisan pattogó animáció. Az egyes kártyákat azonosító elemek sorozatával egy mű és egy figyelemfelkeltő körhinta, amely beépíti azokat a webhelyére.
Automatikus végtelen körhinta
Egy csúszka, amely - amint a saját neve figyelmeztet - automatikusan megjelenik anélkül, hogy a felhasználónak kölcsönhatásba kellene lépnie nincs idő vele. A különböző képek, amelyek ezt a feltűnő körhintát alkotják, az átmenet miatt jelennek meg, amelyben varázslatosan elhalványul.
Lebegő körhinta
A lebegő elemmel ezt csúszka balról jobbra mozog, vagy fordítva, amikor az egérmutatót rajta hagyjuk. Zökkenőmentes átmenet a képcsúszkát alkotó különböző fotók között való mozgáshoz.
Mobil körhinta
is Carousel Material Design néven, és a jelenlegi trend mindenféle kártyával, itt található egy másik cikk, nagy számmal CSS / HTML-ben, elhatárolódik a többitől azzal, hogy a Google által közzétett tervezési nyelvből áll. A kártyákat hosszan megnyomva mozgathatja a különböző kártyákat.
Instagram Feed Carousel
Összetörheti ennek a kiemelő csúszkának az ötletét nagyítható képcsíkkal az egyikre kattintva. Nagy hatású animáció, bár egy adott típusú weboldalra készült. Az Instagram-bejegyzések egy slick.js körhinta felé kerültek.
Egyszerű szinkronizált körhinta
Nagyon sok köze van az előzőhöz, főleg a képcsíkokban, bár a csúszkával való kölcsönhatás nagyon eltérő oldalirányú mozdulattal balról jobbra és fordítva. Ismét a slick.js teszi a dolgát. Feltűnő a nagy hatása miatt.
3D vízszintes körhinta
Az általunk közzétett lista egyik legérdekesebb körhinta. Kiáll a vízszintes csúszkákat CSS-ben és HTML-ben hogy fantasztikusan jól mozognak. Csak az egérmutatót kell hagynia a négyzetek felett, hogy megtalálja a négy variációval előállítható különböző effektusokat.
CSS körhinta
Egyszerű és nagyszerű vizuális effektus a váltakozó kártyasorozat elöl. A hatás 3D-ben jelenik meg, így azok közé a csúszkák közé tartozik, amelyek sok figyelmet vonzanak, különösen a minimális visszapattanó hatás miatt, amely zsenialitást mutat ugyanazon alkotó részéről.
Ambilight Bootstrap körhinta
Egyszerű csúszka, nagyszerű hatással, amely nem tűnik túl soknak. Egyike a azokat az egyszerű csúszkákat amit általában keresünk, és ez azt az érzést kelti bennünk, hogy különösebb rajongás nélkül egyek vagyunk, de ez tökéletesen teljesíti a funkcióját.
Körhinta csapat
Ha meg akarja mutatni a szerkesztőséget, amely a blogon van, ez a csúszka tökéletes a szerepében. Jó, mint az előző, hogy mennyire egyszerű. Kiemelkedik a gyémántok használatával a csapat minden fényképének elhelyezéséhez. Automatikus lejátszással rendelkezik.
Körhinta kocka
Csúszka, amely kiemelkedik azzal, hogy egy kocka, amelyben az arcok mindegyike az egyik kép vagy fényképeket, amelyeket egy weboldalon szeretnénk megjeleníteni. Csak rájuk kell kattintani, hogy görgethesse őket, és megtudja, milyen tartalmak várnak rád.
Körhinta nyíl billentyűk
Egy csúszka, amelyen keresztül zajlik az interakció a nyílbillentyűk segítségével. Egyszerű, sok rajongás nélkül, amely közvetlenül egy másik típusú interakcióhoz vezet, amely évekkel ezelőtt tűnik. Meghatározott felhasználásra.
Függőleges körhinta
Egy csúszka, nagyszerű vizuális effektussal automatikusan folytonos függőleges animációban játszik amely lekerekített sarkú kártyáival tűnik ki. Nagyon aktuális és az egyik, amely önmagában is kiemelkedik ebből a teljes listából.
Tiszta CSS körhinta
Ez a körhinta kiemelkedik azzal, hogy a oldalsó menü, ahonnan mehetünk az egyes lehetőségekre kattintva. Az információk jól elért visszapattanó hatással jelennek meg, annál sokkal többet, mint amit mondtak.
Függőleges körhinta reagál
Hasonló a előző a függőlegessége miatt, bár ez a csúszka képes az oldal teljes szélességét figyelembe venni az egyes fülek képeinek megjelenítéséhez. Érdekes a nagy formátum és a CSS átmenetek használata a diák közötti csúsztatáshoz.
3D osztott körhinta
Nagyszerű vizuális effektus csúszka mintával, amely 3D-ben forog nagyon frappáns animáció. A bal oldali menüből kiválaszthatja az egyes lehetőségeket, mindegyikhez pontokkal. A lista egyik legjobbja, hogy mennyire kreatív.
Jó reggelt, a Pure CSS körhintát szeretném használni a webhelyemen, de csak egy helyen található, hogyan tudom elérni, hogy az oldalamon a kívánt pozícióban legyen.
Kérjük, segítsen ebben. Nagyon köszönöm
Hogyan tudom az egérmutatót jól megjeleníteni a webhelyem mobil változatán?
Kiváló, milyen jó munkát végeztek!
Helló, a kocsiházak nagyon klasszak, de amint feltöltöm, másolom és beillesztem, a javascrip hibát ad nekem a var max = $ ('# c> li) .lenght miatt. Mit javasol