Carousel View in Swift

Create your own custom carousel view for onboarding flows

Bruno Lorenzo
Mar 1 · 4 min read
Photo by Mia Baker on Unsplash

If you had to do an onboarding for any of your apps, you have probably searched for a third-party library that solves the logic for you. Although there’re a bunch of pretty cool libs for onboarding out there, you can do it yourself in a couple of steps.

Doing things yourself eliminates the third-party dependencies, which means for example, that you don’t need to worry if the library is currently maintained or if it’s up to date to the latest versions of swift. And also (the funniest part), it gives you the possibility to learn a lot in the process.

So, in this article I want to show you how you can create a simple (but effective and flexible) onboarding like this.

We’re going to need only two components for our onboarding view: a UICollectionView with a custom UICollectionVIewFlowLayout and a UIPageControl.

The first step is to define the custom UICollectionViewCell that is going to have the information that we want to show in our carousel. Just to simplify things let’s add only an image and a descriptive text to our cell.

Next, we need a brand new UIView that’ll help us hold the carousel configuration.

We’re almost done. However, we’re missing the most important setup. In order to make our collection view scroll horizontally, we must create a custom UICollectionViewFlowLayout. So, let’s do this in a new extension inside our CarouselView.

Now we have everything in place to run the code. We only need to create a new instance of the CarouselView, add it to the ViewControllers’s view, and call the configureView function with the data that we want to show.

You’ll notice that there’re a couple of errors that we should fix.

  • We should only see one cell on the screen.
  • We should only scroll one page at a time.
  • We should change the current page control when we scroll to a new cell.

To see only one cell on the screen we need to set the UICollectionViewLatout’s minimumLineSpacing property. This is the space between items of the same section. We must set the separation between items as the superview’s width minus the item size width.

If you run the code again you’ll notice that we now only see one cell on the screen but it isn’t centered. Well, to fix that we must change the carouselLayout’s left and right insets. Think about what we just configured, we set the space between items as the super view width minus the item’s width. Now we only need to add the space between the super view left and right side to our collection view.

This is half of the super view’s width minus the item’s width because it is only going to be applied to the first and the last cell.

We also have to limit the scrolling to only one cell at a time. We can achieve this behavior by setting the isPagingEnabled property of our UICollectionView to true.

The only missing part is updating the page control when we swipe to a new cell. This is a tricky thing to do, however, the whole idea behind it is to get the middle point of our collection view, and then try to get the index path of that point by calling carouselCollectionView.indexPathForItem(at: visiblePoint).

At this point, we just have to update our currentPage variable every time we scroll.

And every time we update the current page we have to update the page control’s current page as well.

And there you go, a simple and full customizable onboarding view. The cool thing about doing it yourself is that if eventually you want to show a different layout on the onboarding, you only need to change the UICollectionViewCell and the CarouselData struct. The rest of the code can stay untouched.

If you want to animate the background view when scrolling between pages I recommend checking the repo with the full code here. You’ll only need to add a custom delegate in the CarouselView to notify the page change.

As always, I hope you find this helpful =). If you want you can follow me on twitter.

The Startup

Get smarter at building your thing. Join The Startup’s +786K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bruno Lorenzo

Written by

iOS Engineer at Houlak.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Bruno Lorenzo

Written by

iOS Engineer at Houlak.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

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