Lory Carousel Slider Features CSS Animation & Touch Support

Out of all the carousel plugins online I have to tip my hat to Lory. It’s such a simple concept but it’s easily one of the most powerful sliders on the web.

The minified version totals about 7KB which isn’t small but certainly isn’t bad for a touch-enabled carousel slider.

Read Also:  Image Carousels in Web Design — Benefits & Best Practices

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.

With the JavaScript file installed you’ll want to create an HTML unordered list with the slide contents, but Lory comes with a few predefined classes so it’s good to stick with their model.

Here’s some sample code taken from the main Lory GitHub repo:

<div class="slider js_slider">
    <div class="frame js_frame">
        <ul class="slides js_slides">
            <li class="js_slide">1</li>
            <li class="js_slide">2</li>
            <li class="js_slide">3</li>
            <li class="js_slide">4</li>
            <li class="js_slide">5</li>
            <li class="js_slide">6</li>
        </ul>
    </div>
</div>

Now in jQuery (or plain JS), you can set up a function call. It should look something like this:

$('.js_slider').lory({
  infinite: 1
});

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.