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.
- 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...