Slick - The Best Responsive Carousel Javascript Plugin

Written by Kevin Liew on 23 Sep 2015
38,253 Views • Javascript

Carousel is a great way to present and organise your content in website. You can show part of the content but not all to make sure the webpage not clutter with too much information.

I'm not sure about you, as a front-end developer, I hate to implement javascript carousel, especially in responsive layout. I always facing issue such as:

  • If the carousel is diplaying 3 items at the same time, part of the third item sometimes get cut out
  • There always margin issue!

Well, maybe it's just me. But hooray, no more time wasting fiddling with css, I stumbled upon this awesome carousel script called Slick. Tagged with the tag line - "The last carousel youll ever need", I'd say, the author is totally right.

It works perfectly in responsive view, and the most awesome thing is - you can apply different settings in different viewport. For example, display 4 items in desktop viewport, 3 items in tablet viewport and 1 item in mobile viewport. It's really simple. You can also lazy load the images in carousel too.

Here is the list of other useful features:

  • Fully responsive. Scales with its container.
  • Separate settings per breakpoint
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Desktop mouse dragging
  • Infinite looping.
  • Fully accessible with arrow key navigation
  • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc...

It definitely beats the rest of Javascript carousels out there. It supports events, callbacks so, it's pretty easy to customize it to your need.


Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.