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.
Tutorial:
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.
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.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| scrollView.addSubview(imageView) | |
| } | |
| // 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) | |
| commonInit() | |
| } | |
| required init?(coder aDecoder: NSCoder) { | |
| super.init(coder: aDecoder) | |
| commonInit() | |
| } | |
| private func commonInit() { | |
| Bundle.main.loadNibNamed(String(describing: PhotoSliderView.self), owner: self, options: nil) | |
| addSubview(contentView) | |
| contentView.frame = self.bounds | |
| contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight] | |
| } | |
| // MARK: Helper Methods | |
| @IBAction func pageControlTap(_ sender: Any?) { | |
| guard let pageControl: UIPageControl = sender as? UIPageControl else { | |
| return | |
| } | |
| 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.x-pageWidth/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.
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.
The full source code for a test project I have created for creating this photo slider is available:
iOS Cookbook 
i am new to swift how can scroll image with timer here can you please help me anyone
LikeLike
Hello, can you explain a bit more what you mean by that? You mean scroll automatically without the user touching the screen?
LikeLike