Creating an embedded Carousel with UIPageViewController

4 min readFeb 6, 2019

There are probably numerous implementation of carousel, but do you really need to use 3rd party library for this? This is a simple example how to implement custom carousel.

Step #1: Setup project

You can name your project however you want. I am using CarouselSample for demo purposes.

Step #2: Layout UI

Next step should be to setup a storyboard itself. We will create an initial layout by adding ContainerView (which will contain carousel) and button to proceed.

Now let’s add PageViewController which will be responsible for showing carousel items and embed it inside a container view.

Step #3: Designing CarouselItem

In order to be flexible we will create a carousel item. Create a new folder inside the project where you will place code related to this. Create new view by selecting File -> New -> File… (or just use Cmd + N 😉) and name it CarouselItem. The view will have a background and a label.

Step #4: Connect UI with code

Start with the simplest, which is CarouselViewController. Open view controller next to storyboard (you can do this by pressing alt key). Right mouse click on the container view and drag the connection to controller code. This will automatically create an outlet. This way we can access UI elements from the controller code. Let’s do the same for the button.

Our button needs to respond to tap, and to support that, we need to tell it how it should behave. Right mouse click on the button and drag the connection to controller code. Choose Action as type and name the action. Now we can implement onTap action assigning behaviour to the button (I left this open as logic can vary).

Moving forward to CarouselItem. First we will need to create .swift file which will represent carousel item in the code. Having this done, it is important to properly connect .xib with .swift file. This will be accomplished by setting File’s Owner class to the CarouselItem class. Now connect elements from UI with code.

We don’t have anything to do with PageViewController as there are no UI elements with which we will manipulate.

Step #5: Adding logic for carousel movement

The complete logic for our carousel movement will be handled by our custom CarouselPageViewController. Start by creating a new file. Now the fun part begins. Start off with creating carousel items. We will create three items with different text and background. To make CarouselItem visible on the screen we need to wrap it up in UIViewController.

To make items appearing we need to implement UIPageViewControllerDataSource:

pageViewController(_:, viewControllerBefore:) Returns the view controller before the given view controller. This method will allow us to go to previous item.

func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController?

func pageViewController(_:, viewControllerAfter:) Returns the view controller after the given view controller. This method will allow us to go to next item.

func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController?`

Let’s spice this up by adding an indicator. Implement the following functions of UIPageViewControllerDataSource:

presentationCount(for:) Returns the number of items to be reflected in the page indicator.

optional func presentationCount(for pageViewController: UIPageViewController) -> Int

presentationIndex(for:) Returns the index of the selected item to be reflected in the page indicator.

optional func presentationIndex(for pageViewController: UIPageViewController) -> Int

change the transition type to Scroll

and decorate page control indicator to show selected and inactive item.

The last step we have to do is to let the UI know which controller is responsible for managing carousel movement. We will do that by setting CarouselPageViewController as the class of the PageViewController. And now we are settled.