Chapter 27
Building an Image Carousel

Carousel is one of the common UI patterns that you can find it in most of the mobile and web apps. Some people refer it as an image slider or rotator. However, whatever name you call it, a carousel is designed to display a set of data in finite screen space. Say, for an image carousel, it may show a single image from its collection with a navigation control suggesting additional content. Users can swipe the screen to navigate through the image set. This is how Instagram presents multiple images to users. You can also find similar carousels in many other iOS apps such as Music and App Store.

Figure 1. Sample carousel in the Music, App Store, and Instagram app
Figure 1. Sample carousel in the Music, App Store, and Instagram app

In this chapter, you will learn how to build an image carousel entirely in SwiftUI. There are various ways to implement a carousel. One approach is to integrate with the UIKit component called UIPageViewController and make use of it to create the carousel. However, we will explore an alternative approach and create the carousel without using the UIKit framework but build it completely in SwiftUI.

Let's get started.

Introducing the Travel Demo App

Likes other chapters, I love to walk you through the implementation by building a demo app. The app displays a collection of travel destinations in the form of a carousel. To browse through the trips, the user can swipe right to view the subsequent destination or swipe left to check out the previous trip. To make this demo app more engaging, the user can tap a destination to see the details. So, other than the implementation of a carousel, you will also learn some animation techniques that can be applied in your own apps. Figure 2 shows you some sample screenshots of the demo app. To see it in action, you can check out the video at

Figure 2. The demo app
Figure 2. The demo app

To access the full content and the complete source code, please get your copy at

results matching ""

    No results matching ""