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.
SPECIFICATIONS & DOWNLOAD
- Official Website / Demo / Download
- Plugin Category: Carousel, Gallery & Slider
- Requirement: jQuery Lirabry
- Compatibility: Modern Browsers
- License: MIT License
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.