How to create a custom carousel in Swift
![Oscar de la Hera Gomez](https://www.delasign.com/CDN/headshots/profile.webp)
![A flower that represents Swift next to a flower that represents XCode. Beneath it sits the text that states 'How to create a custom carousel in Swift'.](https://www.delasign.com/CDN/images/How-to-create-a-custom-carousel-in-Swift.webp)
A step by step walkthrough on creating a carousel in Swift (iOS).
The following tutorial walks you through how to create a custom carousel in Swift (iOS) using XCode. The project builds on our Open Source Swift project and implements a carousel in Swift.
This tutorial starts on the main branch and the changes are available on the tutorial/custom-carousel 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.](https://www.delasign.com/CDN/images/What-we-are-making_2022-08-16-163225_hukh.webp)
In this tutorial we will be programming the view that is shown in the image above.
Tutorial
We recommend downloading our open source project and carrying out the steps outlined below.
git clone git@github.com:delasign/swift-starter-project.git
Please note that we are building this carousel in the CustomUIView that is setup as part of our Open Source Swift starter project.
Step One: Declare the carousel
![A screenshot showing you how to declare the carousel in Xcode, Swift and iOS.](https://www.delasign.com/CDN/images/Declare-CollectionView.webp)
In CustomUIView.swift, declare the carousel as a UICollectionView.
In the case of UICollectionViews, we like to declare and set them up functionally, as demonstrated in the snippet below.
Please note that we have also removed the label from the UI declarations for this tutorial.
Step Two: Create your custom carousel cell
![A screenshot showing you the code for the CarouselCell as well as where its located within the project.](https://www.delasign.com/CDN/images/Declare-Custom-Cell.webp)
UICollectionview's require you to register UICollectionView cells for them to function. This can be seen as the card view that sits within your carousel.
Under the CustomUIView folder, create a new folder called Components.
Within the Components folder, create another folder called CarouselCell.
Within this, create a new Swift file called CarouselCell and paste in the code below.
It is important to note that the identifier will be used as a reuseIdentifier in the UICollectionview to know what cell it takes in and reuse via its prepareForReuse - which is called when a cell leaves the screen. As described in the comment, this should clear the cell from all of its data to allow it to change for the next card within the carousel.
As this tutorial has a static cell with no changes, we will not do anything.
Step Three: Setup the custom carousel cell UI
![A screenshot showing you how we setup the CarouselCell UI.](https://www.delasign.com/CDN/images/Custom-Cell-Setup-UI.webp)
Under the CarouselCell folder, create a new Swift file called CarouselCell+UI.swift and paste the code below.
Step Four: Call setupUI in the CarouselCell initializer
![A screenshot showing you how we called SetupUI within the initializer of the carousel cell.](https://www.delasign.com/CDN/images/Call-Setup-UI.webp)
In CarouselCell.swift in the init function, call setupUI() to make sure the UI gets setup.
Step Five: Setup your carousel
![A screenshot showing you how to add the carousel to the CustomUIView.](https://www.delasign.com/CDN/images/Setup-Carousel_2022-08-16-162354_gqbc.webp)
In CustomUIView+UI.swift replace the code with the snippet below.
The code above is responsible for:
- Adding the carousel to the CustomUIView.
- Registering the CarouselCell that we created in previous steps.
- Setting the delegate and datasource to the CustomUIView.
Step Six: Add the delegate and datasource functionality
![A screenshot showing you how to add the delegate and datasource functionality.](https://www.delasign.com/CDN/images/CollectionView-Delegate-Datasource.webp)
Under the CustomUIView folder, create a new file called CustomUIView+CollectionView.
Within this, paste in the code below.
We recommend that you place it under the +Notifications extension.
Step Seven: Add the visual parameters functionality
![A screenshot showing you how to add the visual parameters functionality.](https://www.delasign.com/CDN/images/Visual-Parameters.webp)
Within CustomUIView+CollectionView.swift, below the delegate and datasource functionality, add the following code.
Step Eight: Invalidate the Carousel Layout
![A screenshot showing you how to invalidate the carousel layout.](https://www.delasign.com/CDN/images/Invalidate-Layout.webp)
In CustomUIView.swift, add the following code to your lifecycle, below the removeFromSuperview functionality.
This is particularly important to make sure that your view updates:
- When the ViewController SafeAreaInsets change.
- On orientation change.
- If your view changes dimension through an animation or alteration.
Step Nine: Verify
![A screenshot showing you what the code looks like on iPhone in Portrait and Landscape.](https://www.delasign.com/CDN/images/Verify_2022-08-16-162700_ketv.webp)
Run the app using Xcode and rotate it to see the results.
Any Questions
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.