This is a design for five images.
More or less and you will need to do a small amount of arithmetic.

I have covered the following concepts in other threads so you need to have a little understanding of their use here:
  • Name - UsesJQuery. I was lazy in using jQuery for this $().wrap() operation but the JavaScript equivalent is quite busy.
  • Name - htmlclass='picture'. Allows a collection of all 'pictures' to be handled.
  • Layer - !Images. When hidden, its contents are still rendered. Useful for a tidy design.
  • Web image type - PNG. Ensures the alpha channel is used otherwise you get chunks of the design being move around too.


Place any five images into the !Images layer and Group them.
The images are best with transparency and so need to be set to PNG. Enabling WebP is a bonus.
These must be grouped.

All you then do is arrange them or their order and change the speed of the slider and how much you want the images to move.

CSS - Carousel.xar

To add a sixth image:
  • Find the fifth child entry - img:nth-child(5) { animation-delay: calc(var(--time) * (4/5)); }
  • Copy and change the copy to img:nth-child(6) { animation-delay: calc(var(--time) * (5/6)); }
  • Work back down the originals, changing each 5 to a 6.


Ten images would need 10 child statements; the last would be 9/10 decreasing by one all the way down to 1/10.

Acorn