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.

Download code Visit demo

Tags: glide

<< Table Sort TableKit >>

Glider demo

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<center>
	<h1>Glider.js</h1>
	
	<div id="my-glider">
		<div class="controls">
			<a href="#section1">Section 1</a> | 
			<a href="#section2">Section 2</a> |
			<a href="#section3">Section 3</a> |
			<a href="#section4">Section 4</a> |			
		</div>
		
		<div class="scroller">
			<div class="content">
				<div class="section" id="section1">
					Section 1
					<p>You can put any kind of HTML in here:</p>
					<img src="images/orange.druplicon.gif" />
				</div>
				<div class="section" id="section2">
					Section 2
					<p>Style the sections however you want</p>
				</div>
				<div class="section" id="section3">
					Section 3
					<p>I-frames? Yes, but only if scrollbars are hidden:</p>					
					<iframe src="http://www.example.com" style="overflow:hidden"></iframe>
				</div>
				<div class="section" id="section4">
					Section 4
					<p>Flash? Sort-of works:</p>					
					<object width="200" height="150"><param name="movie" value="http://www.youtube.com/v/Ef-f7EeDpYI"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Ef-f7EeDpYI" type="application/x-shockwave-flash" wmode="transparent" width="200" height="150"></embed></object>					
				</div>
			</div>
		</div>			
	</div>
	<a href="#" onclick="my_glider.previous();return false;">Previous</a> | <a href="#" onclick="my_glider.next();return false">Next</a>
	<script type="text/javascript" charset="utf-8">
		var my_glider = new Glider('my-glider', {duration:0.5});
	</script>
</center>
</body>
</html>

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.