How to create a scroll indicator for a carousel in Swift

Oscar de la Hera Gomez
A flower that represents Swift next to a flower that represents XCode. Beneath it sits the text that states 'Carousel Scroll Indicator'.

The following tutorial walks you through how to snap a carousel to position in Swift (iOS) using XCode. The project builds on our Open Source Swift project and two previous tutorials aimed at implementing a carousel, and snapping the carousel to a position in Swift.

This tutorial starts on the tutorial/snap-carousel-to-position branch and the changes are available on the tutorial/scroll-indicator branch of the repository found below.

Please note this tutorial uses the TinyConstraints Swift package, which we added using the Swift Package Manager.

What are we creating in this tutorial ?

A screenshot showing you what we're making this tutorial.

In this tutorial, we will build on the two previous tutorials that saw us create a custom carousel and then make it snap to position; and will add a scroll indicator that will change to show us what index we are at & which will allow us to switch carousel index on by tapping on an indicator.


We recommend downloading our open source project and checkout the tutorial/snap-carousel-to-position branch and carrying out the steps outlined below.

git clone

Step One: Create your Scroll Indicator

A screenshot showing you how we created the carousel indicator.

Under Components folder within the CustomUIView folder, within the Components folder, create another folder called CarouselIndicator.

Within this, create a new Swift file called CarouselIndicator.swift and paste in the code found below.

This code has declared a callback variable called onRelease which will get called which the indicator is tapped.

Step Two: Setup your Scroll Indicator Touches

A screenshot showing you how we setup touches for our scroll indicator.

In the CarouselIndicator folder, create a new file called CarouselIndicator+Gestures.swift and copy the code found below.

This code sets up a tap gesture, which when ended, calls the onRelease callback (as shown on line 31).

Step Three: Call setup gestures

A screenshot showing how we called setup gestures for our carousel indicator.

In CarouselIndicator.swift call the setupGestures function from the initializer.

Step Four: Declare the variables

A screenshot showing you how we declared the variables for the carousel indicator in our CustomUIVIew.

In CustomUIView.swift declare a constant for your scroll indicator as a UIStackView and declare a variable to keep track of the indicators as an array of CarouselIndicators. Sample code available below.

Step Five: Setup your Scroll Indicator

A screenshot showing you how we setup our Scroll Indicator within our CustomUIView UI.

In CustomUIView+UI.swift update your code to the code found below.

This code is responsible for:

  • Allowing the UIStackView to use constraints.
  • Adding the UIStackView to the CustomUIView.
  • Settings the UIStackView constraints.
  • Setting the UIStackView spacing.
  • Adding the indicators to the UIStackView.
  • Setting the indicators alpha depending on the index.
  • Setting the indicators constraints.
  • Adding them to the indicators array to allow us to update them in later steps.

If you were to run the app in its current state it would look like this:

A screenshot showing you the progress on the app.

Step Six: Scroll to index on Tap

A screenshot showing you how we setup the scroll to index on tap. Please note that we made snap to position not private to allow it to be accessed from this extension.

In the setupScrollIndicator function within CustomUIView, update the function to the code found below.

Step Seven: Update indicators on scroll

A screenshot showing you how we updated the indicators on scroll.

In CustomUIView+ScrollView.swift update your snapToPosition function to the code found below.

Step Eight: Verify

A screenshot showing you what we're making this tutorial.

Run your code and see the scroll indicator update on scroll and scroll to index on tap.

Any Questions

We are actively looking for feedback on how to improve this resource. Please send us a note to with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details