Lory Carousel-schuifregelaar is voorzien van CSS Animation & Touch-ondersteuning

Van alle carrousel plug-ins online Ik moet mijn hoed naar foppen papegaai. Het is zo een eenvoudig concept maar het is gemakkelijk een van de krachtigste sliders op internet.

De verkleinde versie totalen van ongeveer 7KB, wat niet klein maar zeker is is niet slecht voor een aanraakbare carrouselslider.

U kunt deze plug-in toevoegen aan elke website werkt op jQuery of plain vanilla JS. Het kan werken met geen afhankelijkheden wat geweldig is voor compatibiliteit.

Lory is ook een van de weinige plug-ins die degradeert niet in oudere browsers. Haar volledig ondersteund in IE10+, en oudere versies kunnen nog steeds de schuifregelaar gebruiken, gewoon zonder animaties en kleine extra's.

Je zal moeten doe alle programmatische codering zelf als je inhoud wilt toevoegen, maar het is verrassend eenvoudig. U kunt definiëren hoe groot elk paneel moet zijn, hoe lang animeren en hoe om te gaan met reagerende browsers.

Bekijk de Lory-startpagina voor broncode en details over de installatie.

Begin met het toevoegen van de Lory JS-bibliotheek naar uw site hoofd sectie, als een jQuery-plug-in of een vanillebibliotheek. Alle versies zijn momenteel gehost op de Cloudflare CDN, dus het is supereenvoudig om een kopie zonder downloads op te nemen.

Als het JavaScript-bestand is geïnstalleerd, wilt u een niet-geordende HTML-lijst maken met de inhoud van de dia, maar met Lory komt met een paar voorgedefinieerde klassen dus het is goed om vasthouden aan hun model.

Hier zijn er een paar voorbeeldcode overgenomen van de hoofdrepos van Lory GitHub:

Nu in jQuery (of gewoon JS), kunt u een functieaanroep instellen. Het zou er ongeveer zo uit moeten zien:

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

Merk op oneindig optie is slechts een van de vele functies die u kunt aanpassen. En je kunt altijd het .js_slider klas om aan uw behoeften te voldoen.

Tijdens het ontwikkelen met deze plug-in kun je heel veel aanpassingsvragen stellen. Ik zou het ten zeerste aanbevelen bladeren door de documentatie die helemaal onderaan de GitHub-pagina staat.

Waarschijnlijk niet de beste locatie voor docs maar gelukkig zijn ze redelijk klein. Je hebt alleen ongeveer 10 opties aanpassen en misschien 10-12 verschillende evenementen je kunt sleutelen met. Deze informatie is ook te vinden onderaan de Lory-website, maar het is veel gemakkelijker om te lezen op GitHub.

Updates zijn niet zo vaak, maar u kunt altijd een aanvraag voor een probleem indienen op GitHub als je problemen tegenkomt. Als je echt problemen hebt met de code, heb je waarschijnlijk een gemakkelijker tijd om ze op Stack Overflow op te lossen.

Hoe dan ook, dat kan ga vrij snel van start gebruik van de Cloudflare CDN en de GitHub-documenten. En als u op zoek bent naar een live demo met code bekijk dit CodePen-bericht.