Carousel in IOS (Swift, SwiftUI)

M.Abbas
M.Abbas
May 20 · 4 min read

Hi, Guys in this blog I will tell you you can create a Carousel in IOS by using the Swift & SwiftUI in XCode. In this blog, you see four designs of carousel. Let's get started.

Step-1

Create a SwiftUI project on XCode like below.

Step-2

Now our main SwiftUI file is ContentView.swift. That file will open by default when we run the app. Now outside of that View write a small dummy CardView. Like below

Step-3

Now in ContentView create a @State var index and give the default value “0”. After that use VStack with a frame height of 200.

A TabView that switches between multiple child views using interactive user interface elements.

Inside that VStack write the TabView which is taking two parameters one is the selection & the other is View. Bind that index with the selection of TabView and inside the TabView closure use ForEach and Print the CardView(). I just printed the CardView() three times here for demo purposes. After that, For TabView style, I am using the tabViewStyle by using the modifier like this with TabView.

.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

By writing that code you will see the default design of the Carousel like below.

Custom Carousel Design…

Use .never instead of .always inside of the .tabViewStyle for custom carousel design.

1st Carousel Design:

Now for custom for designing carousel indicators read below.

For custom designing carousel indicators you just need to print the Horizontal Row of Elements. Like if I want to show the circles as carousel indicators then create the Horizontal Row of Circles. Remember the number of Circles should equal the number of TabView items. In step-3 I am printing the 3 CardView so here we will create the 3 circles Horizontal Row.

Now we just need to bind our index variable with the fill color of Circle. Now if the index of Circle is equal to the self.index then the color of the circle will be dark otherwise the color will be light.

Write this code under the TabView inside the VStack in Step-3.

After that our carousel will look like this.

2nd Carousel Design:

Now for the 2nd Carousel Design, I am just replacing the Circle() with the Rectangle().

Write this code under the TabView inside the VStack in Step-3.

After that our carousel will look like this.

3rd Carousel Design:

Now for the 3rd Carousel Design, I am using the Rectangle() instead of Circle() with a width of 30 and a height of 5.

Write this code under the TabView inside the VStack in Step-3.

After that our carousel will look like this.

4th Carousel Design:

Now for the 4th Carousel Design, I am using the Rectangle as in the 3rd Carousel Design but the width is removed from the frame of the Rectangle(). Now the Rectangles occupy all the space.

Write this code under the TabView inside the VStack in Step-3.

After that our carousel will look like this.

Complete Code:

Hope you understand all. If not then comment below here :) 👍

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store