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 TabView and then populate the container with a view for each page. To make the TabView display a carousel instead of a Tab Bar the SwiftUI tabViewStyle 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 Viewlayer 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 Viewproperty 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 Stylemodifier 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 Itemmodifier 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.
⬇ Note
The Tab View container will always display the fill variant of an SF symbol, so if you select house, for example, SwiftUI will automatically use house.fill.
★ 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.
📱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.
Resources
Download this Judo file to play around with our carousel build.