This is an effective image slider that you can use to show your users multiple images inside a single window. This the user can swipe the Photo Slider or use the UIPageControl to change the current image.


Start with an empty single application template. First, we put a UIView into the UIViewController in the main storyboard file. This UIView will become our Photo Slider. It needs to be constrained to the center of the UIViewController, have an aspect ratio of 1:1 and bound to the horizontal edges.

Screen Shot 2018-02-12 at 6.54.10 PM

Then we want to make our custom photo slider view. We need to create the XIB and swift file for this view. The XIB will look something like this, with a UIScrollView, UIView for our content and a UIPageControl.

Screen Shot 2018-02-12 at 6.52.13 PM

Now we want to create the PhotoSliderView.swift file. This is going allow us to configure our slider with as many images as we want. It will also be responsible for handling the tap event on the UIPageControl, allowing the user to tap it to change the picture. Most of the magic happens inside the configure method. This is where we will iterate through the images that we are passed and add a UIImageView to the correct frame.

import UIKit
// MARK: PhotoSliderView
class PhotoSliderView: UIView {
// MARK: Outlets
@IBOutlet var contentView: UIView!
@IBOutlet var scrollView: UIScrollView!
@IBOutlet var pageControl: UIPageControl!
// MARK: Configure Methods
func configure(with images: [UIImage]) {
// Get the scrollView width and height
let scrollViewWidth: CGFloat = scrollView.frame.width
let scrollViewHeight: CGFloat = scrollView.frame.height
// Loop through all of the images and add them all to the scrollView
for (index, image) in images.enumerated() {
let imageView = UIImageView(frame: CGRect(x: scrollViewWidth * CGFloat(index),
y: 0,
width: scrollViewWidth,
height: scrollViewHeight))
imageView.image = image
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
// Set the scrollView contentSize
scrollView.contentSize = CGSize(width: scrollView.frame.width * CGFloat(images.count),
height: scrollView.frame.height)
// Ensure that the pageControl knows the number of pages
pageControl.numberOfPages = images.count
// MARK: Init Methods
override init(frame: CGRect) {
super.init(frame: frame)
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
private func commonInit() {
Bundle.main.loadNibNamed(String(describing: PhotoSliderView.self), owner: self, options: nil)
contentView.frame = self.bounds
contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
// MARK: Helper Methods
@IBAction func pageControlTap(_ sender: Any?) {
guard let pageControl: UIPageControl = sender as? UIPageControl else {
scrollToIndex(index: pageControl.currentPage)
private func scrollToIndex(index: Int) {
let pageWidth: CGFloat = scrollView.frame.width
let slideToX: CGFloat = CGFloat(index) * pageWidth
scrollView.scrollRectToVisible(CGRect(x: slideToX, y:0, width:pageWidth, height:scrollView.frame.height), animated: true)
// MARK: UIScrollViewDelegate
extension PhotoSliderView: UIScrollViewDelegate {
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView){
let pageWidth:CGFloat = scrollView.frame.width
let currentPage:CGFloat = floor((scrollView.contentOffset.xpageWidth/2)/pageWidth)+1
pageControl.currentPage = Int(currentPage)

We need to call the configure method in the UIViewController. We have defined an array of six images, which we pass into the configure method. We are going to call this configure method inside of viewDidAppear so that we are sure of the photo sliders frame before we start manipulating the frames inside the photoSliderView. If we try to do this inside viewDidLoad, we could get unexpected behavior.

Screen Shot 2018-02-12 at 7.04.48 PM

The last thing we need to do is set up our outlet in the main ViewController and don’t forget to change your UIView class to the PhotoSliderView. Now it is time to build and run and you should see a great result.

Screen Shot 2018-02-12 at 7.08.26 PM

The full source code for a test project I have created for creating this photo slider is available:

2 thoughts on “Tutorial: iOS Photo Slider View

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.