Lory Carousel Slider Funksjoner CSS Animasjon og Touch Support

Ut av alle karusellplugger på nettet Jeg må tippe hatten min til Lory. Det er slik enkelt konsept men det er lett en av de mest kraftige skyvekontrollene på internett.

De minifisert versjon totals ca 7KB som ikke er liten, men sikkert er ikke dårlig for en berøringsaktivert karusellsklipper.

Du kan legge til dette pluginet på et nettsted siden det kjører på jQuery eller vanlig vanilje JS. Det kan løpe med ingen avhengigheter som er flott for kompatibilitet.

Lory er også en av de få plugins som Nedbryter ikke i eldre nettlesere. Det er fullt støttet i IE10+, og eldre versjoner kan fortsatt kjøre skyveknappen, bare uten animasjoner og små ekstramateriale.

Du må Gjør all programmatisk koding selv hvis du vil legge til innhold, men det er det overraskende enkelt. Du kan definere hvor stort hvert panel skal bli, hvor lenge du skal animere, og hvordan du håndterer lydige nettlesere.

Sjekk ut Lory hjemmeside for kildekode og detaljer om oppsett.

Start med å legge til Lory JS-biblioteket til nettstedet ditt hode seksjon, enten som en jQuery-plugin eller et vaniljebibliotek. Alle versjoner er for øyeblikket vert på Cloudflare CDN, så det er veldig enkelt å ta med en kopi uten nedlastinger.

Med JavaScript-filen installert vil du opprette en HTML-uordnet liste med lysbildeinnholdet, men Lory kommer med noen forhåndsdefinerte klasser så det er godt å holde fast med sin modell.

Her er noen prøvekode hentet fra hoved Lory GitHub repo:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

Nå i jQuery (eller vanlig JS), kan du sette opp et funksjonsanrop. Det skal se slik ut:

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

Legg merke til uendelig alternativet er bare en av mange funksjoner du kan tilpasse. Og du kan alltid endre .js_slider klassen som passer dine behov.

Mens du utvikler med dette pluginet, er du ansvarlig for å ha tonnevis av tilpasningsspørsmål. Jeg vil anbefale leser dokumentasjonen som er nederst på GitHub-siden.

Sannsynligvis ikke den beste plasseringen for docs, men heldigvis er de ganske små. Du har bare ca 10 alternativer å tilpasse og kanskje 10-12 forskjellige hendelser du kan tinker med. Denne informasjonen kan også bli funnet nederst på Lory-nettstedet, men det er mye lettere å lese på GitHub.

Oppdateringer er ikke like hyppige, men du kan alltid penn en problem forespørsel på GitHub hvis du får problemer. Hvis du virkelig har problemer med koden, vil du sannsynligvis ha en lettere tid på å løse dem på Stack Overflow.

Uansett, kan du Kom godt i gang ganske raskt bruker Cloudflare CDN og GitHub docs. Og hvis du leter etter en live demo med kode sjekk ut denne CodePen oppføringen.