4 ms·

Slider.js: Slideshows with jQuery, CSS Transitions and Canvas

160 points by gren 15y ago

hackDaily 15y ago
Very nice! There are a lot of rotator plugins out there, but yours seems very complete and robust. I will definitely be using this in future projects since our clients always want more fancy sliders. Thanks again!
- brlewis 15y ago
  What business are your clients in? I tend to think of slideshow transitions as something users find enjoyable only for a very short time. (I run a photosharing site -- http://ourdoings.com/ http://ourdoings.com/ -- where I recently redid the slideshow to use photoswipe, which works well on touch devices but does not do fancy transitions.)
  - hackDaily 15y ago
    Our clients are typically churches and small business who like to have banners on their home pages. There's always something "featured" that they want to show off.
    - brlewis 15y ago
      That use case makes sense to me -- a quick attention-getter.
spython 15y ago
His flexible-nav jquery library he is using on the demo page looks actually more interesting than the slider.js itself - http://demo.greweb.fr/flexible-nav/ http://demo.greweb.fr/flexible-nav/
- castewart 15y ago
  Agreed! Was more impressed with the nav, but that's probably because I'm on old hardware/slow connection so the slideshow was very sluggish for me.
- hmigneron 15y ago
  Reminded me of the navigation on a javascript documentation website posted a little while ago : http://bonsaiden.github.com/JavaScript-Garden/ http://bonsaiden.github.com/JavaScript-Garden/ I am seeing more and more of these all over the place and I think they are great for long pages! Would love to see more of them instead of table of contents on documentation websites (for example, using something similar on a site like the HTML5 spec : http://www.w3.org/TR/html5/ http://www.w3.org/TR/html5/ would make the navigation a lot more efficient)
xbryanx 15y ago
Bummer, the images display not at all with JavaScript turned off and there's no way to link to a specific image. Degrade gracefully y'all.
- jmilloy 15y ago
  Perhaps it's the responsibility of each website using slider.js to degrade gracefully on their own. That seems more appropriate to me. In which case, I don't mind if they don't bother to degrade while demoing their javascript product.
- gee_totes 15y ago
  Yeah, I can't even scroll the page on Chrome
- wavephorm 15y ago
  Are you really demanding that the author of an open source javascript project to supply non-javascript code to make your website backwards compatible? You've gotta be kidding me. That's not his responsibilty at all. Try contributing to an open source project instead of complaining.
  - xbryanx 15y ago
    Yep, I absolutely expect that. Especially on the example page.
    - wavephorm 15y ago
      So now you have 2 problems: 1) Your website requires backwards compatibility 2) It's not his problem Better whine and complain on the internet until someone fixes your problems for you.
    - gren 15y ago
      Problem solved: It's very easy to handle a Javascript fallback for Slider.js: Instead of having an empty container in which your slider will be templated, put the content for the non-javascript into it. That's it ;) Just because the Slider Javascript will empty the content of it ;) (Side thought: maybe I'm wrong, but in 2011, are we still need a JS backwards?)
josscrowcroft 15y ago
This is just great, huge potential, looking forward to giving it a try. Congrats to author!
sudonim 15y ago
As a ux / design type person, I'm turned off by the design of the prev, next and slide selectors. I know that's not the main purpose of the JS library, however, I'd spend a little time making it look pretty: Here are some ideas: http://dribbble.com/search?q=slideshow http://dribbble.com/search?q=slideshow Great work though so far!
- gren 15y ago
  Thanks for your ideas! The slider engine is here, you are free to style it :)

160 points by gren 15y ago

Very nice! There are a lot of rotator plugins out there, but yours seems very complete and robust. I will definitely be using this in future projects since our clients always want more fancy sliders. Thanks again!

brlewis 15y ago
What business are your clients in? I tend to think of slideshow transitions as something users find enjoyable only for a very short time. (I run a photosharing site -- http://ourdoings.com/ http://ourdoings.com/ -- where I recently redid the slideshow to use photoswipe, which works well on touch devices but does not do fancy transitions.)
- hackDaily 15y ago
  Our clients are typically churches and small business who like to have banners on their home pages. There's always something "featured" that they want to show off.
  - brlewis 15y ago
    That use case makes sense to me -- a quick attention-getter.

spython 15y ago

His flexible-nav jquery library he is using on the demo page looks actually more interesting than the slider.js itself - http://demo.greweb.fr/flexible-nav/ http://demo.greweb.fr/flexible-nav/

castewart 15y ago
Agreed! Was more impressed with the nav, but that's probably because I'm on old hardware/slow connection so the slideshow was very sluggish for me.
hmigneron 15y ago
Reminded me of the navigation on a javascript documentation website posted a little while ago : http://bonsaiden.github.com/JavaScript-Garden/ http://bonsaiden.github.com/JavaScript-Garden/ I am seeing more and more of these all over the place and I think they are great for long pages! Would love to see more of them instead of table of contents on documentation websites (for example, using something similar on a site like the HTML5 spec : http://www.w3.org/TR/html5/ http://www.w3.org/TR/html5/ would make the navigation a lot more efficient)

xbryanx 15y ago

Bummer, the images display not at all with JavaScript turned off and there's no way to link to a specific image. Degrade gracefully y'all.

jmilloy 15y ago
Perhaps it's the responsibility of each website using slider.js to degrade gracefully on their own. That seems more appropriate to me. In which case, I don't mind if they don't bother to degrade while demoing their javascript product.
gee_totes 15y ago
Yeah, I can't even scroll the page on Chrome
wavephorm 15y ago
Are you really demanding that the author of an open source javascript project to supply non-javascript code to make your website backwards compatible? You've gotta be kidding me. That's not his responsibilty at all. Try contributing to an open source project instead of complaining.
- xbryanx 15y ago
  Yep, I absolutely expect that. Especially on the example page.
  - wavephorm 15y ago
    So now you have 2 problems: 1) Your website requires backwards compatibility 2) It's not his problem Better whine and complain on the internet until someone fixes your problems for you.
  - gren 15y ago
    Problem solved: It's very easy to handle a Javascript fallback for Slider.js: Instead of having an empty container in which your slider will be templated, put the content for the non-javascript into it. That's it ;) Just because the Slider Javascript will empty the content of it ;) (Side thought: maybe I'm wrong, but in 2011, are we still need a JS backwards?)

josscrowcroft 15y ago

This is just great, huge potential, looking forward to giving it a try. Congrats to author!

sudonim 15y ago

As a ux / design type person, I'm turned off by the design of the prev, next and slide selectors. I know that's not the main purpose of the JS library, however, I'd spend a little time making it look pretty: Here are some ideas: http://dribbble.com/search?q=slideshow http://dribbble.com/search?q=slideshow Great work though so far!

gren 15y ago
Thanks for your ideas! The slider engine is here, you are free to style it :)