How to Create a Picture Carousel in PowerApps
There may be a time where you would like to scroll through images in your PowerApp. However, PowerApps does not have a built in control to slide images but with a little creativity you can easily create you own picture carousel in PowerApps. No worries just follow along with this tutorial and I will guide you step by step on how to accomplish this.
Setting It Up!
First step you need to do is to create a collection to hold your images. So go ahead and get a few images you would like to use and put them in a directory to use shortly. For this tutorial I am using an app formatted for a tablet in landscape mode. We will use two screens, 1 to upload the images into a collection using the media upload control (see how-to-add-a-picture-to-a-collection-in-powerappsand) and another to display the images. We will then add a column to the collection to have a row numbers using the technique in my tutorial on How to make a gallery control automatically scroll in PowerApps. It is the row number we will use to filter our image source in the 3 image controls. Continue reading and you too will be an office power user!
- Screen
- Name: ScreenPictureCarousel
- Fill: RGBA(0, 0, 0, 70%)
- Button:
- OnSelect: (You can move this to the “ScreenPictureCarousel” on visible if you prefer.)
Clear(colShowPictures);
ForAll(
colPictures, //This is the collection you added the pictures into.
Collect(
colShowPictures,
Last(
FirstN(
AddColumns(
colPictures,
“RowNumber”,
CountRows(colShowPictures) + 1
),
CountRows(colShowPictures) + 1
)
)
)
);
UpdateContext({varStartTimer: true, varCurrentImage:1});
- OnSelect: (You can move this to the “ScreenPictureCarousel” on visible if you prefer.)
- Timer
- Name: TimerRunShow
- Duration: 4000 (I am using 4 seconds but you can adjust to whichever time you prefer.)
- Repeat: true
- AutoStart: false
- AutoPause: true
- Start: varStartTimer
- OnTimerEnd:
If(
varCurrentImage < CountRows(colShowPictures),
UpdateContext({varCurrentImage: varCurrentImage + 1}),
UpdateContext({varCurrentImage: 1})
) - Visible: false
Navigation for the Picture Carousel
- Image (This is a media image I uploaded. You can use your own or a built in icon.)
- Name: ImagePlayPause
- Image: PlayPause
- X: 652
- Y: 49
- Width: 68
- Height: 46
- OnSelect: UpdateContext({varStartTimer:!varStartTimer})
- Icon
- Name: IconLastPicture
- Icon: Icon.ChevronLeft
- X: 441
- Y: 294
- Width: 38
- Height: 90
- Color: RGBA(128, 128, 128, 1)
- BorderColor: RGBA(128, 128, 128, 1)
- BorderThickness: 2
- DisplayMode: If(varCurrentImage>1,DisplayMode.Edit,DisplayMode.Disabled)
- OnSelect: UpdateContext({varCurrentImage:varCurrentImage – 1})
- Icon
- Name: IconNextPicture
- Icon: Icon.ChevronRight
- X: 922
- Y: 294
- Width: 38
- Height: 90
- Color: RGBA(128, 128, 128, 1)
- BorderColor: RGBA(128, 128, 128, 1)
- BorderThickness: 2
- DisplayMode: If(varCurrentImage<CountRows(colColors),DisplayMode.Edit,DisplayMode.Disabled)
- OnSelect: UpdateContext({varCurrentImage:varCurrentImage +1})
Main Image of Picture Carousel
- Rectangle
- Name: RectangleMainPicture
- X: 423
- Y: 99
- Width: 552
- Height: 552
- Fill: RGBA(0, 0, 0, 50%)
- Image
- Name: ImageMainPicture
- X: 443
- Y: 117
- Width: 513
- Height: 516
- Fill: RGBA(0, 0, 0, 1)
- Image: LookUp(colShowPictures,RowNumber=varCurrentImage).ThePicture
Left Side Image of Picture Carousel
- Rectangle
- Name: RectangleLastPicture
- X: 60
- Y: 200
- Width: 350
- Height: 350
- Fill: RGBA(0, 0, 0, 50%)
- Visible: IconLastPIcture.DisplayMode=Edit
- Image
- Name: ImageLastPicture
- X: 70
- Y: 213
- Width: 330
- Height: 330
- Fill: RGBA(0, 0, 0, 1)
- Image: LookUp(colShowPictures,RowNumber=varCurrentImage -1).ThePicture
- Visible: IconLastPIcture.DisplayMode=Edit
Right Side Image of Picture Carousel
- Rectangle
- Name: RectangleNextPicture
- X: 981
- Y: 202
- Width: 350
- Height: 350
- Fill: RGBA(0, 0, 0, 50%)
- Visible: IconNextPicture.DisplayMode=Edit
- Image
- Name: ImageLastPicture
- X: 988
- Y: 212
- Width: 330
- Height: 330
- Fill: RGBA(0, 0, 0, 1)
- Image: LookUp(colShowPictures,RowNumber=varCurrentImage +1).ThePicture
- Visible: IconNextPicture.DisplayMode=Edit
If you followed this tutorial step by step you should have recreated the animated image as shown on the top of this post. You now know how to create a picture carousel in PowerApps!
Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles will be posted regularly.
