Creating an auto-cycling slideshow in the Studio can be a great way to both grab your users' attention and ensure that they see important information without having to click or hover to learn more. Using interactions to create an auto-cycling slideshow like this may seem daunting, but it’s quite simple!
Creating this slideshow effect only takes a few clicks in the studio when using On View > Cycle Next interactions. And these slideshows don’t have to solely consist of images either–you can use images, videos, gifs, text boxes, groups, and more for your different slides.
Here’s how:
Place the assets that you want to cycle through in their own separate folder in the layers panel. It may help to name this folder Slideshow for clarity later on.
In the Layers Panel, toggle off the visibility of all of the assets within the folder you'll be cycling through other than the first asset that will be shown (this initially shown asset, ideally, should also be at the top of this folder's layer hierarchy). This will ensure that your cycled content will transition correctly between assets.
Select the Slideshow folder, and navigate to your Interact tab.
Here, add an interaction to the folder that says On View > Cycle Next, and choose the Slideshow folder.
You can also set a delay to slow down the cycle speed. Once you save this, you’ll be able to take a look at your preview and see your auto-cycling slideshow!
This slideshow will continuously cycle through the assets or groups of assets in the designated folder at the rate that you choose. If you'd like your slideshow to only cycle through the folder once and then stop, you can place the On View > Cycle Next interaction on each slide in the folder except for the last one. This will cycle through everything in that folder and stop cycling once it reaches the last slide.
Cycling Through Folders
You can also create slideshows that cycle through folders of assets. That way if you’d like to associate multiple assets per slide, like pairing an image with a caption, for example, you can do just that. To do this, organize each asset that makes up a “slide” into a folder, and place each “slide” folder into a larger Slideshow folder that has an On View > Cycle Next interaction applied to it, like this:
Setting up your folders and interaction this way will ensure the slideshow cycles through each folder instead of individual assets.