How-To: Infinite Looping Carousel Slideshow
How it works:
In the CSS:
width is set at a default 100%, but it can be adjusted for desired slideshow width.
- sswidth is the width you would like DISPLAYED of the individual images. In the example code, it is set at 200, even if the actual image size is at 400px.
- ssheight is the height you would like DISPLAYED of the individual images. For square images, this number will be equal to that of , but for rectangular images, the number will be different. You will need to know the aspect ratio.
- looplen is how many times all your images together side-by-side would need to be looped to cover the width and a half of your slideshow. For example, if you have large-width images or many images, you can use a smaller number, but for a fewer number of images or smaller images, it would be better to use a higher number.
- speed is how fast you want the animation to run in seconds. The default number is 30 seconds. The smaller the number, the faster the animation runs, the larger the number, the longer the animation runs.
- tileimgs contain a list of all the images you want in your slideshow. If you want more than 5 images, simply add more to the array with image URLs.
How to make it fancy:
If you wanted to add links to the images, you would need to create a secondary loop, i.e. , in the same order of the images you want linked. Then edit the loop to include the new URL array: . (Since the length of the tileimgs and tileurls arrays should be the same, does not have to be changed.)
If you wanted to add a hover on the images, to black and white, for example, that would be done in CSS. For a standard hover, you would just have to add to the CSS.
This code was developed by ColeCodes.com