Designer Courses / Create in Ceros

Create a Slideshow

In this lesson we are going to build out an image slideshow, that automatically cycles through 3 different images. This functionality allows you to quickly and easily cycle image assets, without requiring an additional input from the user. To get started, upload the “Follow Along” experience which has all of the assets already laid out for you. Additionally, you can also recreate these steps using your own images or download the images above to start from scratch.

How does it work?
To get the images in this experience to cycle automatically, we are going to set up a series of “On view” triggers to show the next image and hide the current image after a short delay. Basically, when “Image one” comes into view, we will trigger “Image two” to show after a 3-second delay, and hide “Image one” using the same delay. Below we have outlined the basic steps to create this experience and included a working demo, however, for additional context be sure to follow along with the video above.

Image 1 Steps:

  • Upload semi-finished experience to get general layout and assets into your studio
  • Select “Image 1” in the layers panel (within “Slideshow”) and navigate to the “Interactions Panel”
    • Apply an “On View” trigger > “Show” action > “Image 2” as the target
    • Change the delay to 3 seconds and toggle “Repeat Interaction”
    • Click “Update”
  • With “Image 1” still selected, apply an additional Interaction of:
    • “On View” trigger > “Hide” action > “Image 1” as the target
    • Change the delay to 3 seconds and toggle “Repeat Interaction”
    • Click “Update”

Image 2 Steps:

  • Select “Image 2” in the layers panel (within “Slideshow”) and navigate to the “Interactions Panel”
    • Apply an “On View” trigger > “Show” action > “Image 3” as the target
    • Change the delay to 3 seconds and toggle “Repeat Interaction”
    • Click “Update”
  • With “Image 2” still selected, apply an additional Interaction of:
    • “On View” trigger > “Hide” action > “Image 2” as the target
    • Change the delay to 3 seconds and toggle “Repeat Interaction”
    • Click “Update”

Note: If we don’t want the slideshow to repeat continuously you do not have to follow the remaining step.

Image 3 Steps:

  • Select “Image 3” in the layers panel (within “Slideshow”) and navigate to the “Interactions Panel”
    • Apply an “On View” trigger > “Show” action > “Image 1” as the target
    • Change the delay to 3 seconds and toggle “Repeat Interaction”
    • Click “Update”
  • With “Image 3” still selected, apply an additional Interaction of:
    • “On View” trigger > “Hide” action > “Image 3” as the target
    • Change the delay to 3 seconds and toggle “Repeat Interaction”
    • Click “Update”

Optional animations:

We’ve also included a few additional animations to make these images flow more fluidly together. To apply these animations:

  • Multi-select all three images in the layers panel
  • Navigate to the Animations tab and apply an “On View” > “Fade in” animation > 0-second delay > .8-second duration
  • With the images still selected, let’s also apply an “On Hide” > “Fade out” animation > 0-second delay > .8-second duration

If you would prefer users to manually cycle through these images, rather than an automatic slideshow, be sure to check out our other lesson on Creating Carousels.

Create a Slideshow