Lory Carousel Slider ponúka funkciu CSS Animation & Touch Support

Zo všetkých kolotočové pluginy online Musím nahrať svoj klobúk austrálsky papagáj. Je to taký jednoduchý koncept ale je to ľahké najsilnejších jazdcov na webe.

minimalizovaná verzia celkovo asi 7 kB, čo nie je malé, ale určite nie je zlé pre posuvník kolotoča s dotykom.

Tento plugin môžete pridať na akúkoľvek webovú stránku beží na jQuery alebo plain vanilla JS. Môže to bežať s žiadne závislosti čo je skvelé pre kompatibilitu.

Lory je tiež jedným z mála pluginov, ktoré nedegraduje v starších prehliadačoch. to je plne podporované v IE10+, a staršie verzie môžu stále spustiť posuvník, len bez animácií a malých doplnkov.

Budete musieť urobte všetko programové kódovanie sami ak chcete pridať obsah, ale je to prekvapujúco jednoduché. Môžete určiť, aký veľký bude každý panel, ako dlho chcete animovať a ako zvládnuť citlivé prehliadače.

Pozrite sa na domovskú stránku Lory pre zdrojový kód a podrobnosti o nastavení.

Začnite pridaním knižnice Lory JS na vaše stránky hlava časť, buď ako doplnok jQuery alebo knižnica s vanilkami. Všetky verzie sú momentálne hostiteľný na Cloudflare CDN, takže je veľmi jednoduché zahrnúť kópiu bez akýchkoľvek sťahovaní.

S nainštalovaným súborom JavaScript budete chcieť vytvoriť neosporiadaný zoznam HTML s obsahom obrázkov, ale Lory prichádza s niekoľkými preddefinovanými triedami tak je dobré držať so svojím modelom.

Tu sú niektoré vzorový kód prevzaté z hlavného repo obchodu Lory GitHub:

Teraz v jQuery (alebo plain JS) môžete nastavte volanie funkcie. Mal by vyzerať takto:

 $ ('. js_slider'). lory (nekonečné: 1);

Poznámka: nekonečný možnosť je len jednou z mnohých funkcií, ktoré si môžete prispôsobiť. A môžete to vždy zmeniť .js_slider triedy, aby vyhovovali vašim potrebám.

Pri vývoji tohto doplnku máte pravdepodobne veľa otázok prispôsobenia. Veľmi by som vám odporučil prezeranie dokumentácie ktorá sa nachádza na spodnej strane stránky GitHub.

Pravdepodobne nie je najlepšie miesto pre docs, ale našťastie sú dosť malé. Len to máte približne 10 možností prispôsobiť a možno 10-12 rôznych udalostí s ktorými sa môžete dostať. Tieto informácie nájdete aj v spodnej časti stránky Lory, ale je to oveľa jednoduchšie čítať v službe GitHub.

Aktualizácie nie sú také časté, ale môžete vždy žiadosť o vydanie na GitHub, ak narazíte na problémy. Ak naozaj máte problémy s kódom, budete pravdepodobne mať jednoduchšie riešenie problémov s pretečením zásobníka.

Či tak alebo onak, môžete začnite veľmi rýchlo pomocou aplikácie Cloudflare CDN a GitHub docs. A ak hľadáte živé demo s kódom pozrite sa na tento vstup CodePen.