Make a Slideshow with Scroll View in Unity 2021 URP
In this article we’ll use the “Scroll View” UI element to create and control a slideshow of four images.
Initial Scene Setup
We’ll start with a Canvas whose elements include a title image and text, an image for the background border of our slideshow.
We’ll child a UI Scroll View to the Slideshow border and then child a Horizontal Layout Group (Create Empty, then add Horizontal Layout Group component).
Then we can add our slideshow images as children of the Horizontal Layout Group element.
Set the Padding of the Horizontal Layout Group to suit your tastes and “Child Alignment” as “Middle Left”.
Now add the Content Size Fitter component to the Horizontal Layout Group and set “Horizontal Fit” to “Preferred Size”.
Connecting Content to Layout to Viewport
Next, child the Horizontal Layout Group element to the Viewport element which is itself a child of the Scroll View element.
You can delete the “Content” element that exists under the Viewport element by default.
Drag the Horizontal Layout Group element into the “Content” field of the Scroll View element’s Scroll Rect component.
Set “Movement Type” to “Clamped” and the “Visibility” of the Vertical Scrollbar field to “Auto Hide”.
Alignment
Now, by default, the content will display about halfway through the slideshow.
Let’s force it to start all the way to the left.
On the Horizontal Layout Group, the Anchor position and pivot to be center left as shown above.
And that’s it!
Hit play and you should see something similar to the above.