This is really awesome. Can see this becoming very useful as more sites go jQuery-less. Also great job with the documentation. Simple, expressive and to the point. Wish more documentation looked like that.
This was my first reaction also. And there's a reason they went out of fashion, because they divide user's focus and bring no benefits apart from being pretty.
The demos could show some common use cases, namely these:
- Previous and next slide visible
- More than one previous and next slides visible
- Half of the previous and half of the next slide visible
A simple slider of one image with different transitions is really easy to implement on pure JavaScript. I imagine this slider can do more than that, but it isn't immediately obvious from the examples.
I think you're talking about a carousel (showing multiple slides at the same time). This is technically an "image slider" so is designed to only show one slide at a time.
It seems nice, but right clicking and selecting "View background image" doesn't always give me the current image. I use this so many times a day. I'd imagine breaking this on one of my websites might piss my users.
Edit: Forgot to say, I'm using Firefox 32.0 on Linux x64.
I know we all despise carousels, but unfortunately they are frequently asked for by clients (or recommended by designers and then asked for by clients), and they do sort of solve the "how do I fit many things into the same space" problem, even if the end result is usually worthless and often annoying for end users.
That said, this one appears to be lacking the little "blobs" you can click on, which seems to be an extremely common carousel request, in my experience. We used Slick recently and found it pretty good: http://kenwheeler.github.io/slick/
Always track interactions (1) with the carousel and evaluate with the client later. You could make a case for a different solution if the statistics show that interaction with 2nd, 3rd etc. content items in the carousel is below acceptable levels (and you've done your best to make it work).
This type of experience (case) can then be carried forward to new projects, possibly convincing designers and clients. Although it might turn out they work just fine, it probably depends on the audience.
[1] Use Google Analytics events to track interactions (next, previous, pause, resume etc.), and add 'campaign' parameters to links inside carousels to compare traffic to product pages originating from carousel links vs. regular menu links (if any).
This is really sound advice and thank you for posting it. But unfortunately empirical evidence doesn't really wash with clients who use words like "snazzy" and have seen carousels on their competitors' sites...
(No doubt those are the clients you should fire, but we aren't all Don Draper.)
- the image drags with your finger, rather than sliding after you make a gesture.
- while dragging sideways, the image moves but not the page
- while dragging up/down, the page moves but not the image
- a counter at the top shows that there are multiple images
If you need a responsive, touch-friendly slider/carousel I would strongly recommend Royal Slider [1]. One of the best sliders/carousels I've seen with tons of options (lazy load, thumbnails, etc.) and there's a WordPress plugin version that's great for clients that want to control their sliders/carousels.
36 comments
[ 3.7 ms ] story [ 70.8 ms ] threadimage sliders
Don't ge me wrong, not my decision to support IE8...
(And I don't think that is a bad thing.)
However, the lightbox still prevails.
Sometimes being pretty is exactly what you need.
If someone wants this particular functionality (fashionable or not), then it's good if they can get a good implementation.
http://shouldiuseacarousel.com/
- Previous and next slide visible
- More than one previous and next slides visible
- Half of the previous and half of the next slide visible
A simple slider of one image with different transitions is really easy to implement on pure JavaScript. I imagine this slider can do more than that, but it isn't immediately obvious from the examples.
Edit: Forgot to say, I'm using Firefox 32.0 on Linux x64.
That said, this one appears to be lacking the little "blobs" you can click on, which seems to be an extremely common carousel request, in my experience. We used Slick recently and found it pretty good: http://kenwheeler.github.io/slick/
Edit: I just realized you probably meant bubbles under the photo, not the left/right buttons
This type of experience (case) can then be carried forward to new projects, possibly convincing designers and clients. Although it might turn out they work just fine, it probably depends on the audience.
[1] Use Google Analytics events to track interactions (next, previous, pause, resume etc.), and add 'campaign' parameters to links inside carousels to compare traffic to product pages originating from carousel links vs. regular menu links (if any).
(No doubt those are the clients you should fire, but we aren't all Don Draper.)
One of the best implementations I've seen on mobile is the craigslist image viewer. Ex http://seattle.craigslist.org/oly/cto/4620247868.html
- the image drags with your finger, rather than sliding after you make a gesture. - while dragging sideways, the image moves but not the page - while dragging up/down, the page moves but not the image - a counter at the top shows that there are multiple images
[1]: http://dimsemenov.com/plugins/royal-slider/