Carousels

New!

Lesson Length -

2:08

Display Your Content In Pages Gallery Style
Close Video

Resources

This zip contains the complete example file used in the Carousels video above, along with the png files for the page indicators, in case you want to try it out yourself.

Let's Use A Carousel

We can either add a Carousel element two ways:

  • add one from our Insert Menu and then drag our layer(s) we want inside to be nested underneath, or alternatively we can:
  • select a layer (or multiple layers) we want to be in a Carousel, and then from the top menu select Arrange > Embed In > Carousel.

Carousels and Horizontal Scroll Containers (covered in the next Lesson) are how our layouts can really start to become magical.

A Carousel creates a way for the user to swipe through full width or even full screen elements. Think of Carousels like pages, but not screens. The user isn’t leaving the screen they’re on, they’re just swiping the contents of the current box:

In this example, each page in our Carousel is just a nice big image a title both contained in a VStack (covered in the Stacks Lesson), creating a total of 4 "pages".

Each child layer directly under a Carousel, whatever that layer is, becomes a page

Loop

Once we've added a Carousel, and we click on it in our Layers Panel, then we can then choose on or off for the only option we have for Carousels: Loop.

Select Loop for when the user hits the last page of our Carousel, and we want it to loop around to the first page again.

Important
You will need a Page Control element for nearly every Carousel, so be sure to read the next section as well.

Page Control

Once we've added a Carousel and filled it with pages, there's a very crucial element missing...

When actually viewing this experience on a mobile device, there’s not really an indication that this is a Carousel at all.

This might be fine in some select cases, but for almost every Carousel we add to our Judo experiences, we’re also going to want to also add a Page Control element.

A Page Control element is an independent element from a Carousel, allowing us complete control of its placement.

We add it via the Inspector Panel:

But... Our Page Control indicators won't show up at all until we've told it which Carousel to indicate

To do so, we then map our Page Control element from the dropdown in the Inspector Panel like so:

Page Control Style

Once we've mapped our Page Control, we can now see the page indicators which correctly indicate the number of pages that we have in this Carousel.

FYI On "Default" Style mode, if you still don't see your Page indicators, this may be because it is over a dark background, so you will need to change it to light. We’ll go over the Light, Dark and Inverted options that you’ll see here for Page Control in more detail when we get to the Accessibility section.

We can also completely customize these indicators if we so choose.

The first way is to select Color from the Style dropdown, where we will then be able to pick a color for each the current page as well as the other pages ("Normal").

The other option is to bring in image files for our indicator icons.

To do so, first select "Image" from the dropdown, then hover over the icons in order to upload your own image file.

The image you upload is really just for the shape of our indicator, as the color dropdown creates a color overlay on our indicator shape.

Hide Single Page Indicator

This hides the icons if there is only one page in our Carousel. This is helpful when we are working with dynamic data, as covered in the Dynamic Data & APIs section.

That’s it for Carousels and Page Indicators.
Next up is Scroll Containers.

Was this lesson helpful?

Close
Close