I have a login screen design where there is a carousal view of images scrolling horizontally and page control is being used. Below the carousal view there is a white view which is having the visible input fields of Username/Passord , login button and Forgot Password. There is another option "Dont you have an account.? SignUp" which can be only seen if we drag the white view a bit above.

Below is the UI which i want to achieve

Tried solution by me

To design this UI in Storyboard Autolayout I am planning to have a main scroll view and inside i am planning to put the elements in the order

• Horizontal Scroll view for Images
• An invisible view of width zero which will be on the top of Horizontal scroll view. I am doing this so that when i scroll white view above it scrolls over the Horizontal Carousal scroll view
• Page control
• White view and inside i am using a vertical stack view with text fields, buttons and other options.

I tried to design the same in Storyboard with constraints but unfortunately i am stuck how to proceed further as I am unable to scroll the white view and a bit confused how to set the constraints for Horizontal carousal view. The Horizontal Carousal view should be under the Brown view which i will be making of width 0 so that when i scroll the white view moves over the Horizontal carousal view

Below is the Storyboard image which i tried so far

Can someone please guide on how to achieve the following UI with proper constraints in Storyboard.?

Thanks.