Make a slideshow using UI Scrollbars

Objective: Create a Slideshow using the Scrollbar.

Scrollbars aren’t only used for text, we can use it to scroll through pictures. To get started, we will need the Images set up.

Next, let’s set up a Empty Game object and align it to the pictures and add the Horizontal Layout Group component. We can set the images as a child to this Object.

Now we can create a Scrollbar. Right click under the Hierarchy → UI → Scrollbar.

Now create another Empty Object and add the Scroll Rect Component.

In the Scroll Rect, we will drop the Horizontal Layout Group object to the Content variable in the scroll rect. Then we will drop the Scroll object into the Horizontal Scrollbar variable.

With that, we can now scroll through the images.

It works but our only problem now is that we can see the images at all times. We want to only see one at a time or half as we transition into the next image. To do that we will need to add a mask! Create another Empty Game object and set up the Rect Transform to an area that you want the images to only show up at.

After that, add the Rect Mask 2D component and drop the Horizontal Group object as a child. With that only when the images are in the Mask area will they appear!

We can make slideshows with the scrollbar now! Thank you for reading and have a wonderful day!