5 ms·

Ideal Image Slider

59 points by gilbitron 12y ago

creatio 12y ago
no jQuery dependency ✓
- swah 12y ago
  can run server side ✓
jgreen10 12y ago
Is there a way to do lazy loading? That would be ideal :)
- gilbitron 12y ago
  You can use the data-src attribute to lazy load images. See https://github.com/gilbitron/Ideal-Image-Slider#getting-started https://github.com/gilbitron/Ideal-Image-Slider#getting-star...
aw3c2 12y ago
At least the demo site fails to show all images if Javascript is disabled.
AlwaysBCoding 12y ago
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.
icantthinkofone 12y ago
sigh image sliders
SergeyDruid 12y ago
Awesome, too bad supports >IE9. Don't ge me wrong, not my decision to support IE8...
dlsym 12y ago
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 12y ago
  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.
  - krapp 12y ago
    When will video backgrounds go out of fashion for the same reasons?
  - kaoD 12y ago
    > bring no benefits apart from being pretty Sometimes being pretty is exactly what you need.
- snogglethorpe 12y ago
  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.
- jbish 12y ago
  Should I use a carousel? http://shouldiuseacarousel.com/ http://shouldiuseacarousel.com/
  - embolalia 12y ago
    It kept infuriatingly moving to the next item before I could finish reading. Proves the point, I suppose.
sergiosgc 12y ago
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.
- cLeEOGPw 12y ago
  Also click and drag isn't working. Can't go without this function these days.
- gilbitron 12y ago
  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.
raldi 12y ago
This appears to be completely unusable on mobile.
- waterlooalex 12y ago
  The swiping seems to be really laggy, makes it seem like its broken.
  - deckar01 12y ago
    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 12y ago
The corners of the container switch to square before transition and then back to round.
- varikin 12y ago
  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.
- bichiliad 12y ago
  I can confirm. I'm on the latest Chrome stable.
- santialbo 12y ago
  On elements with "overflow: hidden" chrome ignores the overflow during the transition for some reason.
davb 12y ago
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.
bshimmin 12y ago
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/
- bshimmin 12y ago
  (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.)
- Pwntastic 12y ago
  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
  - bshimmin 12y ago
    Yeah, sorry, I don't know the proper term for them. The ones on eg. https://stripe.com https://stripe.com are pretty typical.
- michielvoo 12y ago
  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).
chandrew 12y ago
Now to make it a Wordpress plugin.
cookingrobot 12y ago
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
actionscripted 12y ago
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/

Ideal Image Slider

59 points by gilbitron 12y ago

creatio 12y ago

no jQuery dependency ✓

swah 12y ago
can run server side ✓

jgreen10 12y ago

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

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

aw3c2 12y ago

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

AlwaysBCoding 12y ago

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.

icantthinkofone 12y ago

sigh image sliders

SergeyDruid 12y ago

Awesome, too bad supports >IE9. Don't ge me wrong, not my decision to support IE8...

dlsym 12y ago

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 12y ago
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.
- krapp 12y ago
  When will video backgrounds go out of fashion for the same reasons?
- kaoD 12y ago
  > bring no benefits apart from being pretty Sometimes being pretty is exactly what you need.
snogglethorpe 12y ago
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.
jbish 12y ago
Should I use a carousel? http://shouldiuseacarousel.com/ http://shouldiuseacarousel.com/
- embolalia 12y ago
  It kept infuriatingly moving to the next item before I could finish reading. Proves the point, I suppose.

sergiosgc 12y ago

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.

cLeEOGPw 12y ago
Also click and drag isn't working. Can't go without this function these days.
gilbitron 12y ago
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.

raldi 12y ago

This appears to be completely unusable on mobile.

waterlooalex 12y ago
The swiping seems to be really laggy, makes it seem like its broken.
- deckar01 12y ago
  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 12y ago

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

varikin 12y ago
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.
bichiliad 12y ago
I can confirm. I'm on the latest Chrome stable.
santialbo 12y ago
On elements with "overflow: hidden" chrome ignores the overflow during the transition for some reason.

davb 12y ago

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.

bshimmin 12y ago

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/

bshimmin 12y ago
(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.)
Pwntastic 12y ago
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
- bshimmin 12y ago
  Yeah, sorry, I don't know the proper term for them. The ones on eg. https://stripe.com https://stripe.com are pretty typical.
michielvoo 12y ago
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).

chandrew 12y ago

Now to make it a Wordpress plugin.

cookingrobot 12y ago

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

actionscripted 12y ago

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/