ImageCarousel was designed for those that might get a little intimidated with the Javascript side of web sites. Read below to see how easy it is 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.

Download

You can download a zip file here, or you can check out the Github repo.

Some More Examples