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.

How-To-Build-a-PIcture-Carousel-in-PowerApps

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});
  • 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.

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...