Creating a Carousel with Cycle Interactions

With the “Cycle Next” interaction, you can create an image or asset carousel in just a few easy steps.

What are cycle interactions?

Cycle interactions (cycle next and cycle previous) allow users to cycle through a folder or group of objects at the click of a button. When you apply a cycle interaction to an object, you can choose a specific folder to cycle through and we’ll take care of the rest. When a user clicks to activate this interaction, Ceros will automatically show the next object (or group or folder) in your targeted folder while also turning off the visibility for all of the other assets in that folder. Alternatively, you can use the cycle previous interaction to show the previous object in the folder.

Note: “Cycle next” targets the layer directly below the top-most layer in the folder, while “Cycle previous” targets the layer above.

What can I cycle through?

You can use cycle interactions to cycle through any objects (images, shapes, gifs, icons, videos, etc.), grouped objects, or folders. In the screenshot below, you can see we have a folder of images, a video, and grouped objects to cycle through. Since they are all in one parent folder (the Image Carousel folder), the cycle next and cycle previous interactions targeting this folder will cycle through all of these elements. Cycle next will show the object directly below the top layer in the folder, so in this example, it will show Image 1, and then Image 2, Image 3, and so on. Cycle previous will cycle upward through the folder, so if you are starting with Image 1, then it will cycle to the grouped objects, video, Image 3 and so on.

How do you use the cycle interactions to create a carousel?

1. Import your imagery into Ceros and align them on the canvas.
2. In the layers panel, arrange all of your images into a folder or group. Note: Only the images that will be cycling should be in the folder or group. Place any icons or buttons in a separate folder or group.
3. Next, add forward and backward arrows (from the icon library) onto your canvas to cycle the images, and place hotspots over them.
4. On the forward arrow hotspot, apply an interaction of: On Click > Cycle Next > the image folder/group.
5. On the back arrow hotspot, apply an interaction of: On Click > Cycle Previous > the same image folder/group as above.

Now, when you click the arrows, your images will cycle forward and backwards through the images in your designated folder.

If you have any questions about creating carousels or about cycle interactions, don’t hesitate to ping our support team.