Lory Carousel Slider Funktioner CSS Animation & Touch Support

Av alla karusellpluggar online Jag måste tipsa min hatt på Lory. Det är en sådan enkelt koncept men det är lätt en av de mest kraftfulla reglagen på webben.

De minifierad version totals ca 7KB vilket inte är litet men säkert Det är inte dåligt för en pek-aktiverad karusellreglage.

Du kan lägga till det här pluginet på vilken webbplats som helst sedan den körs på jQuery eller vanlig vanilj JS. Det kan springa med inga beroenden vilket är bra för kompatibilitet.

Lory är också en av de få plugins som bryts inte ner i äldre webbläsare. Dess fullt stödd i IE10+, och äldre versioner kan fortfarande köra reglaget, bara utan animeringar och lite extrafunktioner.

Du måste gör all programmatisk kodning själv om du vill lägga till innehåll men det är det överraskande enkelt. Du kan definiera hur stor som helst för varje panel, hur länge du ska animera och hur du hanterar mottagliga webbläsare.

Kolla in Lory hemsida för källkod och detaljer om installationen.

Börja med att lägga till Lory JS-biblioteket till din webbplats huvud sektion, antingen som ett jQuery-plugin eller ett vaniljbibliotek. Alla versioner är för tillfället värd på Cloudflare CDN, så det är super lätt att inkludera en kopia utan några nedladdningar.

Med JavaScript-filen installerad vill du skapa en HTML-oordnad lista med bildinnehållet, men Lory kommer med några fördefinierade klasser så det är bra att hålla sig till sin modell.

Här är några Provkod tagen från den huvudsakliga Lory GitHub repo:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

Nu i jQuery (eller vanlig JS) kan du ställa in ett funktionssamtal. Det borde se ut så här:

 $ ('. js_slider'). lory (oändlig: 1); 

Notera oändlig alternativet är bara en av många funktioner du kan anpassa. Och du kan alltid ändra .js_slider klass som passar dina behov.

Medan du utvecklar med det här pluginet kan du få massor av anpassningsfrågor. Jag rekommenderar starkt bläddrar i dokumentationen som ligger längst ner på GitHub-sidan.

Förmodligen inte den bästa platsen för docs men tack och lov är de ganska små. Du har bara ca 10 alternativ att anpassa och kanske 10-12 olika händelser du kan tinker med. Denna information kan också hittas längst ned på Lory hemsida men det är mycket lättare att läsa på GitHub.

Uppdateringar är inte lika frekventa men du kan alltid penna en fråga begäran på GitHub om du stöter på problem. Om du verkligen har problem med koden kommer du förmodligen att ha enklare tid att lösa dem på Stack Overflow.

Hur som helst kan du Kom igång ganska snabbt med hjälp av Cloudflare CDN och GitHub docs. Och om du letar efter en lev demo med kod kolla in den här CodePen-posten.