Glider

Read more and download "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.




Web 2.0 Box Generator


Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.
Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Name
Url
Comment
Captcha
 

 

1
Fleming
2009-11-10 11:35:57
cool! ... would work well with the css dock meanu if the their were more section ect.

2
Adrian
2009-07-26 18:11:04
Any idea how to make this so that it will automatically shift between the "sections"?

3
Flemming
2009-06-11 16:05:09
This is a cool script...just wish you could put images on top instead of just text

4
Flemming
2009-06-11 15:54:00
This is a cool script

5
Colin
2008-11-13 09:49:18
Awesome! But point of clarification, am I right that this is not ajax?

6
David Webb
2008-09-19 13:28:35
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?

7
David Webb
2008-09-19 08:38:25
dig it!

8
Ellikelli
2008-07-28 07:00:13
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?

9
Nilesh Manandhar
2008-06-03 22:43:55
This is really good, I'm going to use it as well

10
Alberto
2008-05-25 14:44:12
Is there any way to make the transition automatic? it would be nice :-)

11
Ray Brown
2008-05-25 12:11:27
Did you gank this from missingmethod.com, or did they gank it from you? Just wondering. Neat site.

12
Kevin
2008-04-17 08:48:59
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.

13
Nancy
2008-01-29 08:40:45
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.

14
STEVE CHAN
2008-01-10 01:56:24
This is awesome, im going to use this straight away

15
Shabith
2007-10-26 10:29:48
I give up! i thought dis could be done in flash only!

16
Ian Walter
2007-09-28 08:08:03
This script is awesome. I would love to know how to make it automatically transition though. ianwalter at jacksriver dot net

17
Kevin
2007-08-26 12:46:13
After every 17th frame the transition gets wacky. Otherwise this is amazing code.