With Cycle Interactions, 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/group to cycle through and we’ll take care of the rest.
When a user clicks to activate this interaction, Studio will automatically show the next object (or group or folder) in your targeted folder/group while also turning off the visibility for all of the other assets in that folder/group. Alternatively, you can use the Cycle Previous interaction to show the previous object in the folder/group.
Note: Cycle Next targets the layer directly below the top-most layer in the folder/group, 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, we've targeted a group of images to cycle through.
Since they are all in one parent group (the Carousel 02 group), the Cycle Next and Cycle Previous interactions targeting this group will cycle through all of these elements contained within the group.
How do you use the cycle interactions to create a carousel?
Import your imagery into the Studio and align them on the canvas.
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.
Next, add forward and backward arrows (from the Icons tab in the Stock Media menu) onto your canvas to cycle the images, and place hotspots over them.
On the forward arrow hotspot, apply an interaction of: On Click > Cycle Next > the image folder/group.
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 backward through the images in your designated folder.