Carousels are a great way to incorporate more information, images, and videos into your piece without having a cluttered experience. Using the ‘cycle next’ and ‘cycle previous’ interactions, you can easily create custom carousels with any combination of assets. To follow along with this lesson, go ahead and upload the build-along experience to your account.
- To get started, search for an arrow you like from the media library, or upload your own arrow icons. You can always duplicate it for the other side and simply hold shift over the corner to rotate it normal increments. Let’s also create two new hotspots over top of these icons.
- In the layers panel, place everything you want to cycle through into a folder. Name the folder ‘Carousel’ in this case. Make sure you only have the objects or groups of objects you want to cycle through in this folder, and none of the navigation icons or hotspots.
- With both hotspots selected, apply a ‘Click’ trigger, with a ‘Cycle next’ action, and the entire carousel folder as the target. Now edit the left hotspot to say cycle previous.
As you can see in the preview, the Cycle next interaction will cycle through all of the assets in your folder starting from the top down, while the cycle previous will do the opposite. In a later lesson, we’ll take a deeper dive into the other group based interactions to also add an image selector to our carousel.