davidhund/simplest-carousel.md

## simplest-carousel.md

      
    Raw
  

              simplest-carousel.md
            
          
    The simplest possible carousel

Note NIH maybe :)
Although I normally avoid carousels I'm sometimes required to include them.
There are a couple of excellent options (see below), but most of those opt for features over filesize. This is fine, of course. It's just that I often don't need 50% of the features and would rather have a very simple, modular script. Including a carousel plugin that requires dozens of KB's simply to make something 'slideable' seems wasteful.
Strangely enough I've not found many robust carousels that are simple, modular and lightweight...
(Currently http://unslider.com/ (see below) seems to come pretty close)
This started me thinking: "What would I look for in 'the simplest possible carousel'?"
Requirements


Responsive or go home
Keyboard Accessible at least. Touch support with simple plugin?
For modern browsers (PE obviously, but no 10kb dealing with IE8)
Flexbox ? to avoid many float bugs
Markup agnostic but valid ( etc)
Styling/Animation through CSS
< 10kb or choose a full-featured robust alternative
...

What could I do without?


Vertical carousels
Thumbnail navigation
...

Full featured alternatives

The following carousel scripts are quite good. They provide lots of options and features but this comes at a price: dependancies and file-size. Still: check them out.

http://kenwheeler.github.io/slick/ (~34kb ex. CSS)
http://flickity.metafizzy.co/ (~55kb ex. CSS. *Some bundling options)
http://owlgraphic.com/owlcarousel/ (~24kb ex. CSS)

The following carousel scripts are lightweight (but do not completely satisfy my requirements one way or another):

http://unslider.com/ (~5kb ex. CSS Seems a pretty good option, honestly)
http://baijs.com/tinycarousel/ (~2.5kb ex. CSS buggy)