Next Prev

Carousel

The Carousel class is a Prototype/script.aculo.us version.
The library is licensed under a MIT-style license, so make sure to keep the copyright notice for each Interface's JavaScript source file when using it .

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 XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head profile="http://gmpg.org/xfn/11">
<base href="http://www.ajaxdaddy.com/web20/prototype/carousel/">
      <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>carousel</title>
    <script type="text/javascript" src="javascript/prototype.js"></script>
    <script type="text/javascript" src="javascript/effects.js"></script>
    <script type="text/javascript" src="javascript/carousel.js"></script>
		<link   type="text/css"       href="css/carousel.css" rel="stylesheet"> 
	</head>
	<body>

<div id="prev-arrow-container"><img alt="Left3-disabled" id="prev-arrow" src="images/left3-disabled.gif?1163492051" /></div>
<div class="carousel-component" id="html-carousel"><div class="carousel-clip-region"><ul class="carousel-list">
<li><img alt="Image1" class="thumb" src="images/image1.png?1163492051" />Image 1</li>
<li><img alt="Image2" class="thumb" src="images/image2.png?1163492051" />Image 2</li>
<li><img alt="Image3" class="thumb" src="images/image3.png?1163492051" />Image 3</li>
<li><img alt="Image4" class="thumb" src="images/image4.png?1163492051" />Image 4</li>
<li><img alt="Image5" class="thumb" src="images/image5.png?1163492051" />Image 5</li>
<li><img alt="Image6" class="thumb" src="images/image6.png?1163492051" />Image 6</li>
<li><img alt="Image7" class="thumb" src="images/image7.png?1163492051" />Image 7</li>
<li><img alt="Image8" class="thumb" src="images/image8.png?1163492051" />Image 8</li>
<li><img alt="Image9" class="thumb" src="images/image9.png?1163492051" />Image 9</li>
<li><img alt="Image10" class="thumb" src="images/image10.png?1163492051" />Image 10</li>
<li><img alt="Image11" class="thumb" src="images/image11.png?1163492051" />Image 11</li>
<li><img alt="Image12" class="thumb" src="images/image12.png?1163492051" />Image 12</li>
<li><img alt="Image13" class="thumb" src="images/image13.png?1163492051" />Image 13</li>
<li><img alt="Image14" class="thumb" src="images/image14.png?1163492051" />Image 14</li>
<li><img alt="Image15" class="thumb" src="images/image15.png?1163492051" />Image 15</li>
</ul></div></div><script type="text/javascript">
//<![CDATA[
function initCarousel_html_carousel() {carousel = new Carousel('html-carousel', {animHandler:animHandler, animParameters:{duration:0.5}, buttonStateHandler:buttonStateHandler, nextElementID:'next-arrow', prevElementID:'prev-arrow', size:31})};Event.observe(window, 'load', initCarousel_html_carousel);
//]]>
</script>
<div id="next-arrow-container"><img alt="Right3-enabled" id="next-arrow" src="images/right3-enabled.gif?1163492051" /></div>

<br style="clear:both"/>
  
<script type="text/javascript">
  function buttonStateHandler(button, enabled) {
 if (button == "prev-arrow") 
   $('prev-arrow').src = enabled ? "images/left3-enabled.gif" : "images/left3-disabled.gif"
 else 
   $('next-arrow').src = enabled ? "images/right3-enabled.gif" : "images/right3-disabled.gif"
}

function animHandler(carouselID, status, direction) {
  var region = $(carouselID).down(".carousel-clip-region")
  if (status == "before") {
    Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carousel" }, duration: 0.2})
  }
  if (status == "after") {
    Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carousel" }, duration: 0.2})
  }
}

</script>
</body>

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

Loo

2008-06-03 06:13:53

Really nice ! Is it possible to display a vertical carousel IN a horizontal carousel ?

Jim

2008-05-13 10:21:15

Man.. I've been looking everywhere for a way to modify this little script to support wrapping (endless looping). Any ideas?

Noname

2008-05-01 16:18:06

Brett, that is exactly what I thought! :D Scrolling in a look would be great!

Brett

2007-09-02 12:19:17

great carousel effect, is it possible to have it start at the beginning if you get to the last element so it would scroll in an endless loop?

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Carousel

The Carousel class is a Prototype/script.aculo.us version.
The library is licensed under a MIT-style license, so make sure to keep the copyright notice for each Interface's JavaScript source file when using it .

Comment on this example

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Carousel

The Carousel class is a Prototype/script.aculo.us version. The library is licensed under a MIT-style license, so make sure to keep the copyright notice for each Interface's JavaScript source file when using it .

Comment on this example

The Carousel class is a Prototype/script.aculo.us version.
The library is licensed under a MIT-style license, so make sure to keep the copyright notice for each Interface's JavaScript source file when using it .