„Lory Carousel“ slankiklį palaiko CSS animacija ir palaikymas

Iš visų karuselinio įskiepiai internete Turiu nukirpti mano skrybėlę Lory. Tai toks paprasta koncepcija bet tai lengvai vienas galingiausi slankikliai žiniatinklyje.

The redaguota versija iš viso apie 7 KB, kuri nėra maža, bet tikrai nėra blogai prisilietus prie karuselinio slankiklio.

Šį įskiepį galite įtraukti į bet kurią svetainę nuo jos veikia „jQuery“ arba „plain vanilla JS“. Jis gali veikti su jokių priklausomybių tai yra puikus suderinamumas.

Lory taip pat yra vienas iš nedaugelio įskiepių nepažeidžia senesnių naršyklių. Tai visiškai palaikomas IE10+, ir senesnės versijos vis tiek gali veikti slankiklį be animacijų ir mažų priedų.

Turėsite atlikite visą programinį kodavimą jei norite pridėti turinį, bet tai yra stebėtinai paprasta. Galite nustatyti, kaip didelis, kad kiekvienas skydelis, kiek laiko būtų animuotas, ir kaip elgtis su reaguojančiomis naršyklėmis.

Peržiūrėkite „Lory“ pagrindinį puslapį pirminis kodas ir informacija apie sąranką.

Pradėkite pridedant Lory JS biblioteką prie svetainės galva skyrius, arba kaip jQuery įskiepis arba vanilės biblioteka. Visos versijos šiuo metu yra „Cloudflare CDN“, todėl labai paprasta įtraukti kopiją be jokių atsisiuntimų.

Įdiegus „JavaScript“ failą, norėsite sukurti HTML nerodomą sąrašą su skaidrių turiniu, bet „Lory“ ateina keletas iš anksto nustatytų klasių todėl gerai laikytis savo modelio.

Štai keletas mėginio kodas paimtas iš pagrindinio Lory GitHub repo:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

Dabar jQuery (arba paprastame JS) galite nustatyti funkcijų skambutį. Tai turėtų atrodyti taip:

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

Atkreipkite dėmesį į begalinis parinktis yra tik viena iš daugelio funkcijų, kurias galite pritaikyti. Ir jūs visada galite pakeisti .js_slider klasė, atitinkanti jūsų poreikius.

Kuriant šį papildinį, jums gali prireikti tonų tinkinimo klausimų. Labai rekomenduoju naršant dokumentus kuri yra pačiame „GitHub“ puslapio apačioje.

Tikriausiai ne geriausia vieta dokumentams, bet laimei jie yra gana maži. Jūs turite tik apie 10 variantų tinkinti ir galbūt 10-12 skirtingų renginių jūs galite apšviesti. Ši informacija taip pat galima rasti „Lory“ svetainės apačioje, tačiau daug lengviau skaityti „GitHub“.

Atnaujinimai nėra tokie dažni, bet visada galite rašyti leidimo užklausą „GitHub“, jei susiduriate su problemomis. Jei tikrai turite problemų su kodu, greičiausiai turėsite lengviau juos išspręsti „Stack Overflow“.

Bet kuriuo atveju, galite pradėkite gana greitai naudojant „Cloudflare CDN“ ir „GitHub“ dokumentus. Ir jei ieškote a gyva demonstracija su kodu patikrinkite šį „CodePen“ įrašą.