Cole Codes - Web, Graphic, Design

This is an infinite carousel slideshow made with CSS and Javascript. It works only when all of the images have the same dimensions as each other (i.e. 400x400 or 1200x800).


How it works:
The animation is made purely with CSS. The Javascript creates a loop for your images to help the infinite loop appear infinite.

In the CSS:
#slideshow width is set at a default 100%, but it can be adjusted for desired slideshow width.

In the Javascript (how to edit):

  • 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 sswidth, 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.


HTML + Javascript

How to make it fancy:
In the javascript, the loop stacks the different images together in <img src='" + tileimgs[(i - (tileimgs.length*n))] + "'>.
If you wanted to add links to the images, you would need to create a secondary loop, i.e. var tileurls = ["URL1", "URL2", "URL3", "URL4", "URL5"], in the same order of the images you want linked. Then edit the loop to include the new URL array: <a href='" + tileurls[(i - (tileimgs.length*n))] + "'> <img src.... (Since the length of the tileimgs and tileurls arrays should be the same, .length 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 #headslide img:hover{filter: grayscale(1);} to the CSS.

This code was developed by