UICollectionView with Swift: Build Carousel Like Home Screen – iOS Development Tutorial Pt 1


In this episode, we will re-create the Carousel Effect that you see on popular websites like Apple.com, Amazon.com or Facebook.com — but for iOS and Swift.

This same effect is increasingly popular in apps like Instagram, Facebook, App Store. So let’s discover how to build this one with UICollectionView and UICollectionViewController!

You’ll learn:
+ How to create UICollectionView and UICollectionViewController
+ UICollectionViewDataSource and UICollectionViewDelegate
+ UIScrollView and UIScrollViewDelegate
+ How to implement smooth UIScrollView and UICollectionView scrolling

First, let’s download the starter project I prepared for you below. You’ll also receive a FREE video series that I share with you how to build Twitter with Firebase, Instagram App User Interface — literally!, and Nike Retail Store User Interface.


Code Mastery is hosted by Duc Tran, founder of Developers Academy.

This is his free-style no notes, no teleprompter presentation and live coding broadcast with you guys everyday.

To join Duc’s free courses, register for free at


Duc Tran is founder of Developers Academy, one of the world’s leading iOS, Android and Web development trainers.

More than 2,000,000 developers have studied his video trainings; 100,000 developers see his posts each month. Each year, Duc has helped 20,000 plus developers gratudate from his online courses or video series.

To subscribe and get free tutorials, courses and weekly content, visit me at:
Connect with Duc on facebook:
Tweet him:
Get daily inspiration:






21 responses to “UICollectionView with Swift: Build Carousel Like Home Screen – iOS Development Tutorial Pt 1”

  1. George Hanna Avatar

    Hey man great tutorial. Learned more than Carousel Effect. Really really great tutorial. But, please can you talk a little bit slower, however other than that keep it up man.

  2. Tony Li Avatar

    this helps me a lot, but don't you feeling that it always looks like too slow waiting it move to the correct position?

  3. Swifty Codes Avatar

    Very Nice tutorial Sir. I Being new to iOS development can you please tell or make a video on automatic scrolling of this thing and as the end index is reached start the scrolling again from the start ?

  4. Fake Cheater Avatar

    hey Duc at 40:11. offset = CGPoint(……y = – ScrollView.Contentinset.top). why is it minus? . cant we put it (y= targetContentOffset.potee.y) because we are not bothering vertical position of cell.? Thnk you.

  5. sraldous Avatar

    This helped me a lot, but your sample project gives layout errors in the console:
    Interests[35648:3119024] The behavior of the UICollectionViewFlowLayout is not defined because:
    2017-06-20 15:30:32.959 Interests[35648:3119024] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
    2017-06-20 15:30:32.960 Interests[35648:3119024] The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7fdd84607c70>, and it is attached to <UICollectionView: 0x7fdd8481ea00; frame = (0 87; 414 562); clipsToBounds = YES; autoresize = RM+BM; gestureRecognizers = <NSArray: 0x6000002437b0>; layer = <CALayer: 0x60000002cb00>; contentOffset: {-83, 0}; contentSize: {20, 493}> collection view layout: <UICollectionViewFlowLayout: 0x7fdd84607c70>.
    2017-06-20 15:30:32.960 Interests[35648:3119024] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

  6. Fabian Flores Avatar

    Hello Duc, thank you very much for this video.

  7. onewonews Avatar

    i code following from this clip but my code is error can you fix it for me?
    it really important because it will be my final project in university

  8. ds t Avatar

    Hi Duc, how can I paging this collectionview ( I want scroll step by step ) If I use "Paging Enabled" the view work not correct . Thank you so much

  9. Bradley Carter Avatar

    DUDE! Lay off the meth!! Trying to keep up with you has caused so many errors and misspelled stuff, I've had to go back and figure out what the hell I missed. Thanks for the help though. SLLOOOOWWW DOOOWWWWNNNN

  10. Nimeelya Mattluru Avatar

    why u have used the var interest didSetUP method ()

  11. Xin Lok Avatar

    Duc, I like this tutorial, Well explained. Can you please let me know how what we have to do if I want to scroll just one photo at once? appreciate your help.

  12. Simeon Ajala Avatar

    Where is the part 2

  13. Marquise Williams Avatar

    Great Pace Duc and detailed tutorial.

  14. TickTock Avatar

    Yo dude, my computer from 2012 is too old to download Xcode, should I wait for around 6 months before downloading this app because I am getting a new computer. Which language should I learn because currently I am learning Objective-C.

  15. Jay Patel Avatar

    Hi Duc, Can you tell me how to put cell in middle of screen when device orientation change.in my project i am showing images in full screen but when orientation change image not staying middle.

  16. Neelesh Shah Avatar

    Duc, the download links to StrechyHeader files and the starter does not have the Interest swift file, Can you please fix this. Thanks

  17. News News Avatar

    Hey duc how can I get the animation that the picture will chance after a view second like on the apple homepage

  18. News News Avatar

    Hey Duc A nice feature is to add like in the tvOS the focus engine style

  19. Don Paul Avatar

    profileImage.layer.cornerRadius = profileImage.frame.size.width/2

    profileImage.layer.clipToBounds = true

Leave a Reply

Your email address will not be published. Required fields are marked *