Homepage » Toolkit » A Lory Carousel Slider CSS animáció és érintés támogatással rendelkezik

    A Lory Carousel Slider CSS animáció és érintés támogatással rendelkezik

    Az összes online körhinta pluginek Meg kell tennem a kalapomat Papagáj. Ez egy ilyen egyszerű koncepció de ez könnyen az egyik a legerősebb csúszkák az interneten.

    A módosított változat összesen 7KB, ami nem kicsi, de biztosan nem érinti az érintőképernyős karusszel csúszkát.

    Ezt a bővítményt hozzáadhatja bármely webhelyhez a jQuery vagy a plain vanilla JS-en fut. Futtatható nincs függőség ami nagyszerű a kompatibilitás szempontjából.

    A Lory az egyik kevés plugin is nem rontja a régebbi böngészőkben. ez teljes mértékben támogatott az IE10-ben+, és a régebbi verziók még mindig futtathatják a csúszkát animációk és kis extrák nélkül.

    Meg kell csináld magad az összes programozási kódot ha tartalmat szeretne hozzáadni, de ez az meglepően egyszerű. Meghatározhatja, hogy milyen nagy legyen az egyes panelek, hogy mennyi az animáció, és hogyan kezelje az érzékeny böngészőket.

    Nézze meg a Lory honlapját forráskód és a telepítés részletei.

    Kezdje hozzá a Lory JS könyvtárat a webhelyéhez fej szakasz, vagy jQuery plugin vagy vanília könyvtár. Az összes verzió jelenleg a Cloudflare CDN-ben, így szuper könnyű beszerezni egy másolatot letöltés nélkül.

    A telepített JavaScript-fájlban HTML-sorrend nélküli listát kíván létrehozni a dia tartalmával, de Lory-val jön néhány előre meghatározott osztály így jó ragaszkodjon a modellhez.

    Íme néhány minta kód a fő Lory GitHub repóból származik:

     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Most már jQuery-ben (vagy egyszerű JS-ben) függvényhívás beállítása. Ilyennek kell lennie:

     $ ('. js_slider'). lory (infinite: 1); 

    Jegyezze fel a végtelen opció csak egy a sok funkció közül, amit testre szabhat. És mindig megváltoztathatod .js_slider osztály, hogy megfeleljen az Ön igényeinek.

    Ezzel a bővítménygel fejlesztve több tonna testreszabási kérdés is felmerülhet. Nagyon ajánlom a dokumentáció böngészése amely a GitHub oldal alján található.

    Valószínűleg nem a legjobb hely a dokumentumok számára, de szerencsére elég kicsik. Csak van körülbelül 10 opció testreszabni és talán 10-12 különböző esemény tudod bűzölni. Ez az információ megtalálható a Lory honlap alján, de sokkal könnyebb olvasni a GitHub-on.

    A frissítések nem olyan gyakori, de mindig tollat ​​kérjen a GitHub-on, ha problémái vannak. Ha tényleg problémái vannak a kóddal, akkor valószínűleg könnyebb lesz megoldani őket a Stack Overflow-nál.

    Akárhogy is, lehet gyorsan kezdj el a Cloudflare CDN és a GitHub dokumentumok használatával. És ha keres egy élő demó kóddal nézd meg ezt a CodePen bejegyzést.