How to Create a Carousel

Carousels are often used with a set of images—take Instagram, for example—but they can be used with any type of content. Just like when building a tab bar, SwiftUI developers start by adding a <code>TabView</code> and then populate the container with a view for each page. To make the <code>TabView</code> display a carousel instead of a tab bar, the SwiftUI <code>tabViewStyle</code> modifier is applied.

Carousels are commonly used with a page control, or a row of indicator dots or images. Each icon represents a page in the list and the solid one indicates the current page. In this example, we’ll build an image carousel with a custom page control.

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.

<hr>

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 <code>struct</code>, or “structure”, called <code>Component_1</code>, 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 <code>body</code> is a property used to store our content. It contains our <code>TabView</code> layer and inside of it, we have our <code>Image</code> layer complete with the <code>.stretch</code> parameter and the <code>.scaledToFill()</code> modifier.

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

<hr>

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.

<div class="callout note">Note
‍The Tab View container will always display the fill variant of an SF symbol, so if you select <code>house</code>, for example, SwiftUI will automatically use <code>house.fill</code>.</div>

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.

<hr>

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 <code>Image()</code> layers inside of your <code>TabView</code> layer. In addition to the <code>.stretch</code> parameter and the <code>.scaledToFill()</code> modifier in each Image layer, you now also have the <code>.tabItem</code> 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 <code>.indexViewStyle()</code> modifier comes after the <code>TabView</code> container, ensuring that the page control background is <code>.always</code> displayed on each page of your carousel.

<hr>

<div class="callout app">
Preview your design.
‍In the Judo canvas, you can only see the first page that appears in your carousel. Try changing the order of your Image layers in the Layers panel and see what happens. To see your carousel in action, send your design to your mobile device. Make sure you have the Judo app installed.</div>