Designer Courses / Create in Ceros

Create a Carousel

In this lesson, we are going to build out an image Carousel, that allows users to navigate through a selection of images or popups. In this example, each time a user clicks on one of the navigation arrows a new image is served up. To follow along, be sure to upload the Follow Along experience above to your studio, which already has all of the assets laid out for you. Below we have outlined the basic steps to create this experience and included a working demo, however, for additional context be sure to check out the video above.

Image Carousel Steps:

  • Upload semi-finished Ceros experience to get general layout and assets into your studio

Background Layer

  • Search the Noun project for an arrow icon which will cycle images left and right (arrow icons will stay static)
  • Place icon just outside of the image assets on left or right, and duplicate for other side
  • Resize and recolor as needed
  • Optional: If duplicating icon, be sure to rotate to point in correct direction

Carousel Arrow Image

Image 1 Layer

  • Select “image 1” layer and draw a Hotspot over both next and previous icon
  • Rename hotspots – Next: “Show image 2” Previous: “Show image 3”
  • Select “show image 2” Hotspot (over next arrow) and assign two interactions
    • First interaction – On click > Show > “Image 2” layer
    • Second interaction – On click > Hide > “Image 1” layer
  • Select “Show Image 3” Hotspot (over previous arrow) and assign two interactions
    • First interaction – On click > Show > “Image 3” layer
    • Second interaction – On click > Hide > “Image 1” layer

Image 2 Layer

  • Copy both Hotspots in “Image 1” layer and paste in “Image 2” layer
  • Adjust names to reflect correct action
    • Rename “Show image 2” Hotspot to “Show image 3”
    • Rename “Show image 3” Hotspot to “Show image 1”
  • Select “Show Image 3” hotspot (over next arrow) and adjust two interactions
    • First interaction – On click > Show > “Image 3” layer
    • Second interaction – On click > Hide > “Image 2” layer
  • Select “Show image 1” hotspot (over previous arrow) and adjust two interactions
    • First interaction – On click > Show > “Image 1” layer
    • Second interaction – On click > Hide > “Image 2” layer

Carousel Image Interaction

Image 3 Layer

  • Copy both hotspots in “Image 1” layer and paste in “Image 3” layer
  • Adjust names to reflect correct action
    • Rename “Show image 2” Hotspot to “Show image 1”
    • Rename “Show image 3” Hotspot to “Show image 2”
  • Select “Show Image 1” hotspot (over next arrow) and adjust two interactions
    • First interaction – On click > Show > “Image 1” layer
    • Second interaction – On click > Hide > “Image 3” layer
  • Select “Show Image 2” hotspot (previous) and adjust two interactions
    • First interaction – On click > Show > “Image 2” layer
    • Second interaction – on click > hide > “Image 3” layer

Animations

The next step is completely optional, however these animations help smooth out the abrupt image changes and make the experience feel more fluid on the canvas.

  • Multi-select all three image objects in layers panel
    • Apply an “On View” >“Fade in” animation> 0-second delay > .8-second duration
    • Also apply an “On Hide” > “Fade out” animation > 0-second delay > .8-second duration

Carousel Gif

If you would prefer images to automatically cycle, be sure to check out our other lesson on Creating Slideshows.

Create a Carousel