Slider.js - a javascript slider component

Posted by Bruno
on Monday, May 14

Update: this component has been renamed to Glider.js

Inspired by the cool sliding window thingy at Panic, I decided to whip something up that I could use on Curbly.

Glider.js depends on Prototype and effects.js (from the Scriptaculous library), and it’s available for download here.

Here’s what it looks like:

Comments

Leave a response

  1. Les Szklanny – May 14, 2007 @ 09:24 AM

    Bruno, hi!

    Is it possible to slide (or scroll) the content vertically?

    See this example:

    http://www.acehardware.com/mystore/storeLocator.jsp

    Click Next or Prev in the results table.

  2. Daniel Galán y Martins – May 14, 2007 @ 09:37 AM

    Hi, very cool component.

    But PLEASE, give it a new name. You use Script.aculo.us, and there is already a slider.js, that was very confusing at the first moment.

    Regards Daniel

  3. add – May 14, 2007 @ 11:25 AM

    :) when you press next at the last “page” it should slide left with the first page, not sliding all pages right to the first.

    i guess…

  4. bruno – May 14, 2007 @ 11:55 AM

    Thanks for the feedback. Daniel: sorry about the naming confusing, I didn’t really think about it that much before I decided what to call it. Any suggestions for a better name?

    Les: Yes you can scroll the contents vertically, just by changing the css so that the sections (div.section) aren’t floated left.

  5. Scott Becker – May 14, 2007 @ 01:42 PM

    It is sometimes called a carousel component – http://billwscott.com/carousel/, or a slide transition – http://developer.yahoo.com/ypatterns/pattern.php?pattern=slide

    Be on the lookout for WeoGeo – http://www.weogeo.com – a new site I helped develop that makes use of this UI pattern in a big way. It is also built on top of Prototype / Scriptaculous. My component that implements this pattern is named PanelSet. :)

  6. zeno – May 14, 2007 @ 04:52 PM

    very nice! (but you definitely need to change the name)

  7. Jacques – May 14, 2007 @ 07:47 PM

    Here are a few name suggestions. Since the effect is know as push…

    push.js push_in_out.js slide_pusher.js

    ect.

    Keep up the good work.

  8. Carlos Magaña – May 15, 2007 @ 12:11 AM

    Hi, I like this js component, but can be possible choose or in a future version use mootools? Do have it any option to auto slide like in Curbly website?

  9. Helix – May 15, 2007 @ 01:39 AM

    Excellent component implementation! I’m trying to avoid YUI, Mootools and Dojo for now as the learning curve is extraordinary compared to writing your own components from scratch… (well I only had 8 hours to finish a complete site prototype so…)

    Carlos: There’s a component called iCarousel based on MooTools here: http://zend.lojcomm.com.br/icarousel/

  10. Carlos Magaña – May 15, 2007 @ 04:27 AM

    Thanks Helix, by the moment I will to use this Slider.js but I want that it autostart sliding like in www.curbly.com, is it possible? any idea?

  11. Zack Perry – May 15, 2007 @ 08:57 AM

    Thanks for putting this together. I saw that Panic website a while back and loved the interaction.

    Bravo.

  12. Andrew Dupont – May 15, 2007 @ 11:47 AM

    Great work, Bruno.

    I agree that the naming should be changed—not only Slider (which can be confused with Control.Slider) but also Effect.Scroll (which can be confused with Effect.ScrollTo).

    I gave this script a quick once-over to change the naming and integrate a few more Prototype idioms. I renamed Slider to ViewMaster (a tip of the hat to an item from my childhood) and Effect.Scroll to Effect.HorizontalScroll. Take a look .

  13. Agent G – May 15, 2007 @ 09:22 PM

    Have you thought about making an option for timed rotation between sections? Say if you first come to the page, after 10 seconds it goes to the next slide & returns to the first after the last is played.

  14. Agent G – May 15, 2007 @ 09:25 PM

    Just realized the Curby one does have timed rotation, but it doesn’t work in Safari so I didn’t realized it at first.

  15. John – May 18, 2007 @ 03:59 AM

    Its cool , but auto slide like Curbly will rock.

  16. Brian – May 18, 2007 @ 09:08 AM

    Thanks for the javascript, Bruno. I implemented it the other day and it’s working great. I agree that the auto slide feature would be a fantastic addition, and I also suggest that you add a flag to have the sliding be random.

    For my case, I have used this to create a slideshow of my favorite photos, and added graphical arrows to move back and forth between them. I use it as my home page, in order to present myself with a clean, zero information overload screen to look at in my browser. But, right now, it always loads up with the first image. Would be great if every time I loaded the page, a different image was presented. I’m sure this would be helpful for any one using this library, in situations where user’s frequently visit the home page but don’t often stay on it long enough to see all the “slides”.

  17. bruno – May 18, 2007 @ 06:06 PM

    Just a note to let you all know I’ve updated the component, renamed it to Glider.js and added an autoGlide option. Check out the latest here

  18. Dave – May 19, 2007 @ 05:06 AM

    How does one activate the autoGlide feature?

  19. bruno – May 19, 2007 @ 09:16 AM
    Dave: just pass autoGlide:true in the options hash. Example: 
    
my-glider = new Glider{'my-glider', {autoGlide: true, frequency: 4};
  20. Agent G – May 27, 2007 @ 06:27 PM

    There was a slight typo in the above post, but this works.

    var my_glider = new Glider(‘my-glider’, {duration:0.5, autoGlide: true, frequency: 4});

    Works in Safari too :)

  21. Agent G – May 30, 2007 @ 12:45 AM

    I’m stuck on an enhancement I’m trying to add to this code… Is it this the place to request suggestions, or should I be doing that somewhere else?

    Thanks,

    G

  22. bruno – May 31, 2007 @ 04:01 PM

    You can leave feature requests and bug reports at the project page

  23. Orazio – June 01, 2007 @ 10:29 AM

    Great work, Bruno!!! very nice!!!

    I wold have a question: it is possible to use the iframe with scrollbar enabled??? I have made the test but it does not work!!!

  24. Patrick – June 07, 2007 @ 03:27 AM

    I have dreamed of this effect but not enough time to make it.

    Thanks a lot, great great work

  25. bananafiend – June 10, 2007 @ 07:34 PM

    Hey man, I wish you could hear my thanks! Great work!

  26. Steven – June 11, 2007 @ 12:38 AM

    Nice Work