Next Prev

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.

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

<html lang="en">
<head>
<base href="http://www.ajaxdaddy.com/web20/prototype/glider/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Glider.js Example</title>
	<link rel="stylesheet" href="css/glider.css" type="text/css" media="screen" charset="utf-8">
	<script src="javascript/prototype.js" type="text/javascript" charset="utf-8"></script>
	<script src="javascript/effects.js" type="text/javascript" charset="utf-8"></script>
	<script src="javascript/glider.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<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>

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

Fleming

2009-11-10 11:35:57

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

Adrian

2009-07-26 18:11:04

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

Flemming

2009-06-11 16:05:09

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

Flemming

2009-06-11 15:54:00

This is a cool script

Colin

2008-11-13 09:49:18

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

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?

David Webb

2008-09-19 08:38:25

dig it!

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?

Nilesh Manandhar

2008-06-03 22:43:55

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

Alberto

2008-05-25 14:44:12

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

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.

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.

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.

STEVE CHAN

2008-01-10 01:56:24

This is awesome, im going to use this straight away

Shabith

2007-10-26 10:29:48

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

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

Kevin

2007-08-26 12:46:13

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

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Glider

Comment on this example