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 .

Download code Visit demo

Tags: carousel

<< Greybox Frog Js >>

Carousel demo

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

<!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/media/demos/play/1/carousel/carousel/" />

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

Sept. 2, 2007, 12:19 p.m. - Brett: 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?
May 1, 2008, 4:18 p.m. - Noname: Brett, that is exactly what I thought! :D Scrolling in a look would be great!
May 13, 2008, 10:21 a.m. - Jim: Man.. I've been looking everywhere for a way to modify this little script to support wrapping (endless looping). Any ideas?
June 3, 2008, 6:13 a.m. - Loo: Really nice ! Is it possible to display a vertical carousel IN a horizontal carousel ?
July 8, 2008, 3:38 a.m. - Jeff: I'd like to support wrapping (continous looping) too. Any ideas?
Sept. 29, 2008, 9:04 a.m. - Joe: I thought a Carousel rotates as in circular
Nov. 4, 2008, 9:23 a.m. - utsav: 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?
Nov. 5, 2008, 10:17 a.m. - Alberto H: good script, congragulations!
Jan. 5, 2009, 3:04 p.m. - Eddie: Any way to launch an html page or lighbox image from the smaller images in the carousel?
March 1, 2009, 10:27 a.m. - Gianni: Is it possible to add the fading effect for IE while scrolling? TIA
March 18, 2009, 8:53 p.m. - chinese: good,it's very good!
April 25, 2009, 12:23 a.m. - visioneye: It's very good. I need to display images dynamically. And I have changed the list but it is not showing results. Please help if you have any suggestion
Jan. 22, 2010, 5:33 p.m. - Diogo: Is it possible to add automatically rotation?
Oct. 25, 2010, 11:57 p.m. - gangeshvar: You send all file and images my email address
Oct. 30, 2010, 7:20 a.m. - Abraham: Nice work! someone can tell me please how make this carousel automatic scrolling
Nov. 26, 2010, 12:09 p.m. - David Rodriguez: Hi! is excellent its just what I need`. but i can`t download the files. we can help me! please...
March 25, 2011, 7:50 a.m. - natalia: hi wery good
Feb. 24, 2012, 8:57 a.m. - zikotechnofun: how to apply on blogger.
April 24, 2012, 9:38 a.m. - Petr: Hi, why doesnt work in IE9?