19 csúszka vagy körhinta CSS és HTML az Ön weboldalához

szabad csúszkák

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

Fogékony

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.

Cupcake csúszka
Kapcsolódó cikk:
27 HTML- és CSS-csúszka, amelyek a weboldaladnak olyan különleges érzetet adnak

Reszponzív végtelen körhinta

Önreprodukció

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

3D körhinta

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

3D körhinta

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.

Kapcsolódó cikk:
46 Javascript csúszkák és görgők

Automatikus végtelen körhinta

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

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

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

Instagram

Ö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

Egyszerű 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

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

3D CSS

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

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

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

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

CSS-kulcsok

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

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

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

körhinta

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

Hasított

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.


A cikk tartalma betartja a szerkesztői etika. A hiba bejelentéséhez kattintson a gombra itt.

4 hozzászólás, hagyd a tiedet

Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra.

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.

  1.   Mayra orellana dijo

    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

  2.   Xavier Canizares dijo

    Hogyan tudom az egérmutatót jól megjeleníteni a webhelyem mobil változatán?

  3.   Gabriel dijo

    Kiváló, milyen jó munkát végeztek!

  4.   Tony Zambrano dijo

    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