Lory Carousel Slider Funktioner CSS Animation & Touch Support

Ud af alle de karrusel plugins online Jeg skal tippe min hat til Lory. Det er sådan en simpelt koncept men det er nemt en af de mest kraftfulde skydere på nettet.

Det minificeret version totals ca. 7 KB, hvilket ikke er lille, men bestemt er ikke dårligt for en berøringsaktiveret karrusel skyder.

Du kan tilføje dette plugin til enhver hjemmeside siden den kører på jQuery eller almindelig vanille JS. Det kan køre med ingen afhængigheder hvilket er fantastisk til kompatibilitet.

Lory er også et af de få plugins der nedbrydes ikke i ældre browsere. Det er fuldt understøttet i IE10+, og ældre versioner kan stadig køre skyderen, bare uden animationer og lidt ekstramateriale.

Det bliver du nødt til gør alle de programmatiske kodninger selv hvis du vil tilføje indhold, men det er det overraskende simpelt. Du kan definere, hvor store der skal foretages for hvert panel, hvor længe du vil animere, og hvordan du håndterer lydhøre browsere.

Tjek Lory hjemmeside for kildekode og detaljer om opsætning.

Start med at tilføje Lory JS-biblioteket til dit websted hoved afsnit, enten som en jQuery-plugin eller et vaniljebibliotek. Alle versioner er i øjeblikket vært på Cloudflare CDN, så det er super nemt at medtage en kopi uden downloads.

Med JavaScript-filen installeret vil du gerne oprette en HTML-uordnet liste med diasindholdet, men Lory leveres med et par foruddefinerede klasser så det er godt at holde fast ved deres model.

Her er nogle prøvekode taget fra de vigtigste Lory GitHub repo:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

Nu i jQuery (eller almindelig JS) kan du opret et funktionsopkald. Det skal se sådan ud:

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

Bemærk uendelig Mulighed er blot en af ​​mange funktioner, du kan tilpasse. Og du kan altid ændre .js_slider klasse, der passer til dine behov.

Mens du udvikler med dette plugin, er du ansvarlig for at have tonsvis af brugerdefinerede spørgsmål. Jeg vil meget anbefale gennemsøger dokumentationen som er helt nederst på GitHub-siden.

Sandsynligvis ikke den bedste placering for docs men heldigvis er de ret små. Du har kun omkring 10 muligheder at tilpasse og måske 10-12 forskellige arrangementer du kan tinker med. Denne information kan også findes nederst på Lory-webstedet, men det er meget nemmere at læse på GitHub.

Opdateringer er ikke så hyppige, men du kan altid penn et spørgsmål anmodning på GitHub hvis du løber ind i problemer. Hvis du virkelig har problemer med koden, har du nok en nemmere tid på at løse dem på Stack Overflow.

Uanset hvad du kan Kom godt i gang ganske hurtigt ved hjælp af Cloudflare CDN og GitHub docs. Og hvis du leder efter en live demo med kode Tjek denne CodePen-post.