ImageCarousel

ImageCarousel is an image rotator that was designed for those that might get a little intimidated with the Javascript side of web sites. It's drop dead easy to implement.

How to use

1. Copy your carousel images into their own folder inside your project.
2. Copy ImageCarousel.php into the folder from step one.
3. Download and unzip the ImageCarousel files into your project folder. They should unzip into a folder called 'ImageCarousel'.
4. Copy the following code into the head tag of your website.

   <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" language="JavaScript" type="text/javascript" ></script>
   <link href="ImageCarousel/ImageCarousel.css" rel="stylesheet" type="text/css">
   <script src="ImageCarousel/ImageCarousel.js" language="JavaScript" type="text/javascript"></script>
   		

5. Copy the following code into your webpage. This will act as the carousel element.

   <div class="ImageCarousel auto" rel="Images/Carousel/" style="width: 500px; height: 375px;"></div>
   		

   You need to change/check:
   • The 'rel' attribute should point to the folder where you have stored your images. The url should end with '/'.
   • Your images should all have the same dimensions; Check the Carousel 'width' and 'height' match your image dimensions.

Some more options if you wish to further customize your carousel.

• You may add the class 'right' or 'bottom' (or both) to position the numbers in the carousel.
• Adding the class 'fast' or 'slow' will change the duration of the image.
• If you know how, you can move the inline styles into a style tag or external stylesheet.
• You don't need the 'auto' tag if you know how to initialize the carousel manually with javascript. See the javascript class for more details if this is up your street.

Screenshots