

Ideal Image Slider - gilbitron
http://gilbitron.github.io/Ideal-Image-Slider

======
bshimmin
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/](http://kenwheeler.github.io/slick/)

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

~~~
lukestevens
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-...](http://www.annielytics.com/blog/analytics/how-to-trash-your-google-
analytics-account-with-campaign-tagging/)

------
cookingrobot
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](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

------
raldi
This appears to be completely unusable on mobile.

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

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

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

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

------
actionscripted
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/](http://dimsemenov.com/plugins/royal-slider/)

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

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

------
SergeyDruid
Awesome, too bad supports >IE9.

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

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

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

~~~
kaoD
> bring no benefits apart from being pretty

Sometimes being pretty is exactly what you need.

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

------
chandrew
Now to make it a Wordpress plugin.

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

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

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

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

------
creatio
no jQuery dependency ✓

~~~
swah
can run server side ✓

------
icantthinkofone
__sigh __

image sliders

