How to create a scroll indicator for a carousel in Swift

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.

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.

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.

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).

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

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.

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:

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

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

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

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