Image Carousels in Web Design — Benefits & Best Practices
There’s no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but…Read more
You can add this plugin to any website since it runs on jQuery or plain vanilla JS. It can run with no dependencies which is great for compatibility.
Lory is also one of the few plugins that doesn’t degrade in older browsers. It’s fully supported in IE10+, and older versions can still run the slider, just without animations and little extras.
You’ll have to do all the programmatic coding yourself if you want to add content but it’s surprisingly simple. You can define how large to make each panel, how long to animate, and how to handle responsive browsers.
Check out the Lory homepage for source code and details about setup.
Start by adding the Lory JS library to your site’s head section, either as a jQuery plugin or a vanilla library. All versions are currently hosted on the Cloudflare CDN, so it’s super easy to include a copy without any downloads.
Here’s some sample code taken from the main Lory GitHub repo:
Now in jQuery (or plain JS), you can set up a function call. It should look something like this:
Note the infinite option is just one of many features you can customize. And you can always change the .js_slider class to suit your needs.
While developing with this plugin you’re liable to have tons of customization questions. I would highly recommend browsing the documentation which is at the very bottom of the GitHub page.
Probably not the best location for docs but thankfully they’re pretty small. You only have about 10 options to customize and maybe 10-12 different events you can tinker with. This info can also be found at the bottom of the Lory website but it’s much easier to read on GitHub.
Updates aren’t as frequent but you can always pen an issue request on GitHub if you run into problems. If you really do have issues with the code you’ll probably have an easier time solving them on Stack Overflow.
Either way, you can get started pretty quickly using the Cloudflare CDN and the GitHub docs. And if you’re looking for a live demo with code check out this CodePen entry.