Ideal Image Slider | Hacker News Reader

Ideal Image Slider

gilbitron.github.io

59 pointsgilbitron36 comments

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

Tracking interaction with events is a great idea. Using campaign parameters internally however doesn't seem like a good idea, fwiw: http://www.annielytics.com/blog/analytics/how-to-trash-your-...

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

You mean the left/right buttons? It looks like it has them to me.

Edit: I just realized you probably meant bubbles under the photo, not the left/right buttons

Yeah, sorry, I don't know the proper term for them. The ones on eg. https://stripe.com are pretty typical.

(Obviously you could implement your own blobs, but by the time you've done that, you might as well have implemented your own carousel, really.)

It's a good idea, but very buggy on an iPhone 5s in Chrome.

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

This appears to be completely unusable on mobile.

The swiping seems to be really laggy, makes it seem like its broken.

It seems to be waiting for touch end. I expect mobile sliders start dragging on touch start and only navigate if released past some threshold.

The corners of the container switch to square before transition and then back to round.

Hmmm...I don't see that on FF Nightly 34.0a1 (2014-09-01) on OSX. Given I run Nightly, take that as a grain of salt.

On elements with "overflow: hidden" chrome ignores the overflow during the transition for some reason.

I can confirm. I'm on the latest Chrome stable.

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.

[1]: http://dimsemenov.com/plugins/royal-slider/

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.

Also click and drag isn't working. Can't go without this function these days.

Awesome, too bad supports >IE9.

Don't ge me wrong, not my decision to support IE8...

Sure this is a great project, but I have somehow the feeling that image carousels / sliders went out of fashion somewhere 2013.

(And I don't think that is a bad thing.)

However, the lightbox still prevails.

Should I use a carousel?

http://shouldiuseacarousel.com/

It kept infuriatingly moving to the next item before I could finish reading. Proves the point, I suppose.

I don't think "being in fashion" is relevant.

If someone wants this particular functionality (fashionable or not), then it's good if they can get a good implementation.

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.

> bring no benefits apart from being pretty

Sometimes being pretty is exactly what you need.

When will video backgrounds go out of fashion for the same reasons?

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.

Now to make it a Wordpress plugin.

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.

At least the demo site fails to show all images if Javascript is disabled.

Is there a way to do lazy loading? That would be ideal :)

You can use the data-src attribute to lazy load images. See https://github.com/gilbitron/Ideal-Image-Slider#getting-star...

no jQuery dependency ✓

can run server side ✓

sigh

image sliders

Reply on news.ycombinator.com