{"id":29181,"date":"2017-02-10T23:01:59","date_gmt":"2017-02-10T15:01:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29181"},"modified":"2022-07-17T21:21:50","modified_gmt":"2022-07-17T13:21:50","slug":"lory","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/lory\/","title":{"rendered":"Lory Carousel Slider Features CSS Animation & Touch Support"},"content":{"rendered":"

Out of all the carousel plugins online<\/strong> I have to tip my hat to Lory<\/a><\/strong>. It\u2019s such a simple concept<\/strong> but it\u2019s easily one of the most powerful sliders<\/strong> on the web.<\/p>\n

The minified version<\/a><\/strong> totals about 7KB which isn\u2019t small but certainly isn\u2019t bad for a touch-enabled carousel slider<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tImage Carousels in Web Design \u2014 Benefits & Best Practices<\/a>\n\t\t\t\t<\/p>\n

You can add this plugin to any website since it runs on jQuery or plain vanilla JS<\/strong>. It can run with no dependencies<\/strong> which is great for compatibility.<\/p>\n

Lory is also one of the few plugins that doesn\u2019t degrade in older browsers<\/strong>. It\u2019s fully supported in IE10+<\/strong>, and older versions can still run the slider, just without animations and little extras<\/strong>.<\/p>\n

You\u2019ll have to do all the programmatic coding yourself<\/strong> if you want to add content but it\u2019s surprisingly simple<\/strong>. You can define how large to make each panel, how long to animate, and how to handle responsive browsers.<\/p>\n

Check out the Lory homepage<\/a> for source code<\/strong> and details about setup<\/strong>.<\/p>\n

\"carousel<\/a><\/figure>\n

Start by adding the Lory JS library to your site\u2019s head<\/code> section<\/strong>, either as a jQuery plugin<\/a> or a vanilla library<\/a>. All versions are currently hosted on the Cloudflare CDN<\/strong>, so it\u2019s super easy to include a copy without any downloads.<\/p>\n

With the JavaScript file installed you\u2019ll want to create an HTML unordered list with the slide contents, but Lory comes with a few predefined classes<\/strong> so it\u2019s good to stick with their model<\/strong>.<\/p>\n

Here\u2019s some sample code<\/strong> taken from the main Lory GitHub repo<\/a>:<\/p>\n

\r\n<div class=\"slider js_slider\">\r\n    <div class=\"frame js_frame\">\r\n        <ul class=\"slides js_slides\">\r\n            <li class=\"js_slide\">1<\/li>\r\n            <li class=\"js_slide\">2<\/li>\r\n            <li class=\"js_slide\">3<\/li>\r\n            <li class=\"js_slide\">4<\/li>\r\n            <li class=\"js_slide\">5<\/li>\r\n            <li class=\"js_slide\">6<\/li>\r\n        <\/ul>\r\n    <\/div>\r\n<\/div><\/pre>\n
Now in jQuery (or plain JS), you can set up a function call<\/strong>. It should look something like this:<\/p>\n
\r\n$('.js_slider').lory({\r\n  infinite: 1\r\n});\r\n<\/pre>\n
Note the infinite<\/code> option is just one of many features you can customize. And you can always change the .js_slider<\/code> class to suit your needs.<\/p>\n
While developing with this plugin you\u2019re liable to have tons of customization questions. I would highly recommend browsing the documentation<\/strong> which is at the very bottom of the GitHub page<\/a>.<\/p>\n
Probably not the best location for docs but thankfully they\u2019re pretty small. You only have about 10 options<\/strong> to customize and maybe 10-12 different events<\/strong> you can tinker with. This info can also be found at the bottom of the Lory website<\/a> but it\u2019s much easier to read on GitHub.<\/p>\n
Updates aren\u2019t as frequent but you can always pen an issue request<\/strong> on GitHub if you run into problems. If you really do have issues with the code you\u2019ll probably have an easier time solving them on Stack Overflow<\/a>.<\/p>\n
Either way, you can get started pretty quickly<\/strong> using the Cloudflare CDN and the GitHub docs. And if you\u2019re looking for a live demo with code<\/strong> check out this CodePen entry<\/a>.<\/p>\n
\n\t\t\t\t\t10 Best Photo Gallery & Slideshow WordPress Plugins<\/span><\/a>\n
\n\t\t\t\t\t\t\t