Programming

jQuery Content Carousels Roundup

I introduce three of at least a dozen jQuery Content Carousels that are available out there, open source and free to use even on commercial sites: jQuery lightSlider, Owl carousel 2.0 and slick. This article is not about the usability of this UI element, only technical information here!

These three content carousels have more or less the same features:

  • Responsive — different settings for different widths
  • Used with touch, mouse and keyboard
  • CSS3 animations, fallback to jQuery animation for old browsers
  • Autoplay, infinite loop, fixed or variable height
  • Dots for pagination, arrows to slide
  • API for controlling with JavaScript, add / remove slides programmatically

jQuery lightSlider

lightSlider weights 49 KB and uses a CSS file of 9 KB. The default theme requires a PNG file for the arrows, but of course you can change CSS and source to use icon fonts or SVGs. The generated HTML code is logical, but I have a minor complaint, further down at the Cons section.

You should be advised that not all settings are allowed in responsive breakpoints, and those that are available are item, slideMove, slideMargin, thumbItem and thumbMargin. The breakpoints are computed desktop first.

Pros…

A feature that sets lightSlider apart from the rest of the pack is the “Gallery mode” — a single slide carousel with thumbnail strip, horizontal of vertical. This feature can be done in a different way with slick (synchronized carousels), but with Owl carousel you’ll need to use the API and build it youself.

… and Cons

  • Requires specific HTML code to work (UL list)
  • In “loop” mode, slides change one at a time
  • The “center mode” is missing, which allows for one (or more) slides in the center of the screen and partial slides on the left and right sides, to show that this UI element is scrollable, a useful feature when you don’t want arrows / dots on touch screens

See the Pen Testing jQuery lightSlider by Panayiotis Velisarakos (@PVgr) on CodePen.0

Owl Carousel 2

Ownl Carousel 2 is currently in beta. This version is a complete rewrite of the original code and the API might change a bit in the final build. The documentation is not complete yet, The complete distributable file is 83 KB and requires at least one Sass file of 2 KB or the compiled CSS file.

Breakpoint settings for responsive in Owl Carousel 2 are calculated in a mobile first fashion.

Pros…

Owl Carousel 2 uses a plugin system to add extra functionality, which means that you can make a lighter build. It also supports margins between slides, stage padding to keep some space for a small part of previous and next slides to make the whole UI element recognizable, and a feature called merge which merges slides under certain conditions. To be honest, I don’t have a use case for this feature!

…and Cons

Vertical carousels / slideshows are not supported.

See the Pen Testing Owl Carousel 2 by Panayiotis Velisarakos (@PVgr) on CodePen.0

slick

slick is rather hefty at 84 KB and needs one (or two, if you need the default theme) stylesheet, which is in Less, Sass and CSS format. An icon font is also used by default.

Breakpoint settings for responsive in slick are calculated in a desktop first fashion.

Pros…

What really makes slick standout is the use of Aria roles throughout the HTML code.

…and Cons

slick does not calculate space between slides. If margins are used, slick may actually miscalculate and maybe crop a slide, so you’ll have to use paddings.

See the Pen Testing jQuery slick by Panayiotis Velisarakos (@PVgr) on CodePen.0

Leave a Reply

Your email address will not be published. Required fields are marked *