Lory kolotoč Slider funkce CSS animace & Touch Support

Ze všech karusel pluginy online Musím svůj klobouk naklonit Lory. Je to tak jednoduchý koncept ale je to snadno nejvýkonnější posuvníky na webu.

verze celkem 7KB, což není malé, ale jistě není špatný pro dotykový karuselový jezdec.

Tento plugin můžete přidat do libovolné webové stránky, protože to běží na jQuery nebo prosté vanilce JS. To může běžet žádné závislosti což je skvělé pro kompatibilitu.

Lory je také jedna z mála pluginů, které to dělá ve starších prohlížečích nedegraduje. To je plně podporován v IE10+, a starší verze mohou stále běžet jezdcem bez animací a maličkostí.

Budeš muset Proveďte všechny programové kódování sami Pokud chcete přidat obsah, ale je to překvapivě jednoduché. Můžete definovat, jak velký bude každý panel, jak dlouho se bude animovat a jak reagovat na citlivé prohlížeče.

Podívejte se na domovskou stránku Lory zdrojový kód a Podrobnosti o nastavení.

Začněte přidáním knihovny Lory JS na vaše stránky hlava sekce, buď jako plugin jQuery nebo jako vanilková knihovna. Všechny verze jsou v současné době hostuje na Cloudflare CDN, tak je super snadné zahrnout kopii bez stahování.

S nainstalovaným souborem JavaScript budete chtít vytvořit neuspořádaný seznam HTML s obsahem snímku, ale Lory přichází s několika předdefinovanými třídami tak je to dobré držet se svého modelu.

Tady je něco ukázkový kód převzato z hlavního repo Lory GitHub:

 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 

Nyní v jQuery (nebo prostý JS), můžete nastavit volání funkce. Mělo by to vypadat takto:

 $ ('. js_slider'). lory (nekonečno: 1); 

Poznámka: nekonečný možnost je jen jedna z mnoha funkcí, které můžete přizpůsobit. A vždy můžete změnit .js_slider vyhovují vašim potřebám.

Při vývoji s tímto pluginem budete mít spoustu otázek přizpůsobení. Vřele doporučuji procházení dokumentace který je na samém konci stránky GitHub.

Pravděpodobně není to nejlepší místo pro dokumenty, ale naštěstí jsou dost malé. Máš jen asi 10 možností přizpůsobit a možná 10-12 různých událostí můžete se pohrávat. Tyto informace lze nalézt také v dolní části webu Lory, ale je mnohem snazší číst na GitHub.

Aktualizace nejsou tak časté, ale vždy můžete žádost o vydání na GitHub, pokud narazíte na problémy. Pokud opravdu máte problémy s kódem, budete pravděpodobně mít jednodušší čas na jejich řešení.

Ať tak či onak, můžete začít docela rychle pomocí Cloudflare CDN a dokumentů GitHub. A pokud hledáte živé demo s kódem podívejte se na tuto položku CodePen.