How to snap a carousel to position 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 'Snap Carousel to Position'.

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 a previous tutorial aimed at implementing a carousel in Swift.

This tutorial starts on the tutorial/custom-carousel branch and the changes are available on the tutorial/snap-carousel-to-position 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 the design that we will produce on iPhone in portrait.

In this tutorial, we will build on the How to create a custom carousel in Swift tutorial and make the carousel snap to the closest index when your finger stops touching the screen (i.e. at the end of a touch or swipe).


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

git clone

Step One: Declare the current index variable

A screenshot showing you how to declare the currentIndex in the CustomUIView.

In CustomUIView.swift, declare a variable called currentIndex and set it to 0.

Step Two: Create the ScrollView Extension

A screenshot showing you how to code the scrollview extension for the CustomUIView.

Under the CustomUIView folder, create a new file called CustomUIView+ScrollView and copy the code found below.

We recommend that you place it under the +CollectionView extension.

As you can see from the screenshot above, if you run the code:

  • If you finger leaves the scrollview with the carousel still, the console will print

    "[CustomUIView] -- SCROLLVIEW -- ⚈ ⚈ ⚈ scrollViewDidEndDragging ⚈ ⚈ ⚈ willDecelerate false."

  • If your finger leaves the scrollview with the scrollview moving, the console will print "[CustomUIView] -- SCROLLVIEW -- ⚈ ⚈ ⚈ scrollViewDidEndDragging ⚈ ⚈ ⚈ willDecelerate true." & ustomUIView] -- SCROLLVIEW -- ⚈ ⚈ ⚈ scrollViewWillBeginDecelerating ⚈ ⚈ ⚈."

Step Three: Snap to position

A screenshot showing you the code required to snap to position.

Update your extension to the code found below.

The following code will call calculateIndex when a carousel is stopped being interacted with, if it is still (will not decelerate) or when it begins to stop decelerating after a drag has ended.

Calculate Index

This function determines the delta (i.e. the difference between the current scroll position and the initial position, also known as the current index) of the scroll and if it's larger than 0.25; it determines what index to move to.

If it is not larger than 0.25, it returns to the current index.

All the scenarios end by calling snapToPosition.

Snap to Position

This function updates the current index variable declared on step one, and which is used in calculateIndex and subsequently, tells the carousel to scroll to the item at that index.

As mentioned in the comment, please note that this algorithm only works for a carousel (UICollectionView) with one section.


A screenshot showing you what the code looks like on iPhone in Portrait and Landscape.

Run your code and see your carousel snap to position.

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