Glider

This script makes it easy to create a sliding carousel component like the one seen at www.curbly.com. This script uses the Prototype javascript framework and the effects.js library from Scriptaculous. You must include Prototype version 1.5+ in your pages before including this script. This library is known to work in recent versions of IE 6/7, FireFox, and Safari.

Glider demo

Changes to the code below will update the demo above in real time.



Aug. 26, 2007, 12:46 p.m. - Kevin

After every 17th frame the transition gets wacky. Otherwise this is amazing code.

Sept. 28, 2007, 8:08 a.m. - Ian Walter

This script is awesome. I would love to know how to make it automatically transition though. ianwalter at jacksriver dot net

Oct. 26, 2007, 10:29 a.m. - shabith

I give up! i thought dis could be done in flash only!

Jan. 10, 2008, 1:56 a.m. - STEVE CHAN

This is awesome, im going to use this straight away

Jan. 29, 2008, 8:40 a.m. - Nancy

Just change the value of div.scroller div.content in glider.css from 10000px to 20000px (or more) that way you can add as many slides as you want without it getting whacky.

April 17, 2008, 8:48 a.m. - Kevin

Does anybody else get a jumbled transition effect when viewed in FireFox? In firefox, the content that slides in becomes slightly visible to the LEFT of the box before it completely slides in.

May 25, 2008, 12:11 p.m. - Ray Brown

Did you gank this from missingmethod.com, or did they gank it from you? Just wondering. Neat site.

May 25, 2008, 2:44 p.m. - Alberto

Is there any way to make the transition automatic? it would be nice :-)

June 3, 2008, 10:43 p.m. - Nilesh Manandhar

This is really good, I'm going to use it as well

July 28, 2008, 7 a.m. - ellikelli

Good stuff! I ran into a snag though. If I have the slider within a div that's got a PNG background and I've had the alphaImageLoader filter on it (for IE6), it totally breaks it and it won't work in IE7 or IE6. Firefox works fine though. I have the "my-glider" element within a "header" div and that header div has: background: url(bg.png) top left no-repeat transparent; _background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='crop'); Any idea how I could get it to work with the PNG fix?

Sept. 19, 2008, 1:28 p.m. - David Webb

So question...I'd like to make the section headings look like tabs so I put them in a table and added borders...however, now the glider is only gliding like half a frame and it never makes it all the way...any ideas?

Nov. 13, 2008, 9:49 a.m. - Colin

Awesome! But point of clarification, am I right that this is not ajax?

April 5, 2009, 1:03 a.m. - Paul

So I have mine set to auto-glide. Is there a way of adding a stop control to this, so that the user can stop the auto-glide? Thanks for the help.

April 5, 2009, 1:08 a.m. - Paul

I think I figured it out. This function seems to work: my_glider.stop()

June 11, 2009, 3:54 p.m. - Flemming

This is a cool script

June 11, 2009, 4:05 p.m. - Flemming

This is a cool script...just wish you could put images on top instead of just text

June 17, 2009, 5:11 a.m. - sneppa

@Flemming & David Webb: Why don't you use css for the sectionlinks?

July 3, 2009, 2:14 a.m. - sami

Awesome script! Just wondering how to change height and width? thanks

July 26, 2009, 6:11 p.m. - Adrian

Any idea how to make this so that it will automatically shift between the "sections"?

Oct. 10, 2009, 12:01 a.m. - Pitler

Im trying to use this Glider and also jquety libraries but it makes me some troubles with the prototype.js if i put this script the jquery functionality breaks. Any idea why ?

Nov. 1, 2009, 11:25 p.m. - Hector

This script is working very well.

Nov. 10, 2009, 11:35 a.m. - Fleming

cool! ... would work well with the css dock meanu if the their were more section ect.

Jan. 10, 2010, 6:03 p.m. - A great script

¡¡ Thank you very much.!!

Jan. 14, 2010, 11:18 p.m. - gadgets

Nice & awesome script can it works with internet & other browser

March 2, 2010, 4:01 a.m. - jurglic

I have a problem with this script: although it works very well by itself, the gliding effect disappears when I import the jQuery script to the html document. Any ideas? Thanks.

Aug. 5, 2010, 8:52 a.m. - Tanya

Any way to make this scroll automatically?

Oct. 4, 2010, 2:29 p.m. - Erik

If it can scroll automatically, then this is the greatest script to use.