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 .

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

Chinese

2009-03-18 20:53:29

good,it's very good!

Gianni

2009-03-01 10:27:38

Is it possible to add the fading effect for IE while scrolling? TIA

Eddie

2009-01-05 15:04:42

Any way to launch an html page or lighbox image from the smaller images in the carousel?

Alberto H

2008-11-05 10:17:06

good script, congragulations!

Utsav

2008-11-04 09:23:45

Hey nice one. But once i copy the code and run in my local server the buttons don seem to work. what do i do?

Joe

2008-09-29 09:04:21

I thought a Carousel rotates as in circular

Jeff

2008-07-08 03:38:15

I'd like to support wrapping (continous looping) too. Any ideas?

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 .