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.

Visit PhpDaddy.com

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

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