How to Create a Carousel

1. Create a swipeable container.

To create a container that will house all of the pages in your carousel, click the Insert + button and choose New Component under the Components section.

Then, add a Tab View layer to your screen so you can create paged views that you can swipe through. With your component selected in the Layers panel, click the Insert + button to add a Tab View container.

2. Turn your Tab View layer into a carousel.

With your Tab View layer selected in the Layers panel, add the Tab View Style modifier from the Inspector panel. By default, the Tab View style will be set to Automatic, which displays a tab bar for navigation between each tab.

Setting the Tab View style to Page activates a page control for each view, enabling users to navigate between pages by swiping.

3. Style your Tab View layer.

To visualize where your carousel will live on the screen, add a Frame to your Tab View.

With the Tab View layer selected in the Layers panel, insert the Frame modifier from the Inspector panel. In this example, I set a fixed height of 300 points.

4. Add the first image to your carousel.

Insert an Image to create the first page in your carousel. Select the Tab View layer in the Layers panel and insert an Image from the Insert + menu.

To make the Image fit the size of your Tab View, change its Fill in the Inspector panel to Stretch and add the Scaled to Fill modifier. This way, your Image will maintain its aspect ratio while filling up the entire space of your Tab View layer.

Before we move any further, let’s take a look at the Code Inspector to break down the SwiftUI code that Judo has generated for us thus far.

struct Component_1: View 

    var body: some View {
        TabView {
            Image("Placeholder")
                .resizable(resizingMode: .stretch)
                .scaledToFill()
        }
        .tabViewStyle(.page(indexDisplayMode: .automatic))
        .frame(
            height: 300
        )
    }
}

So far we’ve created a struct, or “structure”, called Component_1, to define a separate view in our SwiftUI app. While the view is a screen in our case, it could also be a section of a screen.

The variable body is a property used to store our content. It contains our TabView layer and inside of it, we have our Image layer complete with the .stretch parameter and the .scaledToFill() modifier.

You’ll notice that the .tabViewStyle() and .frame modifiers come after the Tab View layer, ensuring that the .page style and 300 point frame get applied to each page in the carousel.

5. Make the page control always visible.

By default, you won’t see the page control at the bottom of your carousel unless you have more than one page in your Tab View layer. To change this, select your Tab View layer in the Layers panel and change the Index View property in the Inspector panel to Always.

Let’s also add a few more pages to your carousel by copying your Image layer and pasting it into your Tab View layer several times.

6. Add a background to your page control.

To enhance the contrast between the page control and the background content, you can use the Index View Style modifier to add a pill-shaped background.

With the Tab View layer selected in the Layers panel, add the Index View Style modifier from the Inspector panel and set the Background Display property to Always.

7. Customize your page control.

By default, your page control will appear as a series of dots but by adding a Tab Item modifier—which is the same modifier used when creating a tab bar—you can replace the dots with Apple’s SF symbols.

With one of your Image layers selected in the Layers panel, add the Tab Item modifier from the Inspector panel. Select an Icon from the drop-down list. Note that adding a Title will not affect the indicators in your page control. Repeat this step for each Image layer.

Pro Tip
If you’d like to have the same indicators in your page control for several or all of your pages, select all of the applicable Image layers in your Tab View layer before adding the Tab Item modifier and selecting an icon.

Let’s take a look at the final SwiftUI code.

struct Component_1: View {

    var body: some View {
        TabView {
            Image("Placeholder")
                .resizable(resizingMode: .stretch)
                .scaledToFill()
                .tabItem {
                    Image(systemName: "heart")
                }

            Image("Placeholder")
                .resizable(resizingMode: .stretch)
                .scaledToFill()
                .tabItem {
                    Image(systemName: "heart.slash")
                }

            Image("Placeholder")
                .resizable(resizingMode: .stretch)
                .scaledToFill()
                .tabItem {
                    Image(systemName: "heart.slash")
                }
        }
        .tabViewStyle(.page(indexDisplayMode: .always))
        .frame(
            height: 300
        )
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    }
}

Now you have 3 Image() layers inside of your TabView layer. In addition to the .stretch parameter and the .scaledToFill() modifier in each Image layer, you now also have the .tabItem modifier that we just added, complete with the name of the SF symbol that you chose in double quotations.

You’ll also find that the .indexViewStyle() modifier comes after the TabView container, ensuring that the page control background is .always displayed on each page of your carousel.