Welcome to AjaxDaddy.com
A large collection of nifty web 2.0 demos
Home
Demos
Send me a message
Ajax Books
Next
Prev
Carousel
Read more and download "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 .
Here is a quick way to run your own popurls style website
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
Name
Url
Comment
Captcha
1
Chinese
2009-03-18 20:53:29
good,it's very good!
2
Gianni
2009-03-01 10:27:38
Is it possible to add the fading effect for IE while scrolling? TIA
3
Eddie
2009-01-05 15:04:42
Any way to launch an html page or lighbox image from the smaller images in the carousel?
4
Alberto H
2008-11-05 10:17:06
good script, congragulations!
5
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?
6
Joe
2008-09-29 09:04:21
I thought a Carousel rotates as in circular
7
Jeff
2008-07-08 03:38:15
I'd like to support wrapping (continous looping) too. Any ideas?
8
Loo
2008-06-03 06:13:53
Really nice ! Is it possible to display a vertical carousel IN a horizontal carousel ?
9
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?
10
Noname
2008-05-01 16:18:06
Brett, that is exactly what I thought! :D Scrolling in a look would be great!
11
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?
