How to Use
Copy your carousel images into their own folder inside your project.
Copy ImageCarousel.php into the folder from step one.
Download and unzip the ImageCarousel files into your project folder. They should unzip into a folder called 'ImageCarousel'.
Copy the following code into the head tag of your website.
<link href="ImageCarousel/ImageCarousel.css" rel="stylesheet" type="text/css">
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 can download a zip file here, or you can check out the Github repo.
Some More Examples