back to code snippets home

The animation works on mobile automatically!


Congrats! Your Circular rotating image carousel should be setup. 🎉

----------

LICENSE / USAGE

You may use this code:
On unlimited personal or client projects
As part of websites you design

You may not:
Resell or redistribute the code as-is
Claim the code as your own creation

To add your own images and customise the carousel, double click on the design itself so that the code box appears.


Replace the images:
Update the src attributes in the HTML with your own image URLs:

html <img src="YOUR-IMAGE-URL-HERE" alt="Your Product">

Speed:
Change "20s" in the animation code to make it faster (lower number) or slower (higher number)

Number of images:
Add or remove ".carousel-item" divs (adjust the rotation angles accordingly)

Size:
Modify "width" and "height" values in ".carousel" and ".carousel-item"

Distance from center:
Change the "translateZ(450px)" value

Circular rotating image carousel

Instructions for your new

Instructions on Desktop :)