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 PowerApps, Power BI and Power Automate. #PowerAddict

You may also like...

12 Responses

  1. cutting tools catalog says:

    I really like what you guys tend to be up too. This type
    of clever work and coverage! Keep up the wonderful works guys I’ve
    added you guys to our blogroll.

  2. cheap jerseys says:

    This is my first time visit at here and i am genuinely happy to read
    everthing at one place.

  3. cityofdenver.us says:

    We’re a group of volunteers and starting a new scheme in our community.
    Your site offered us with valuable info to work on. You have
    done an impressive job and our whole community will be
    grateful to you.

  4. Willardacila says:

    Superb data. Thanks a lot!

  5. Carson says:

    Hi there, I discovered your site via Google whilst looking for a
    comparable matter, your web site came up, it seems great.
    I have bookmarked it in my google bookmarks.

    Hi there, just changed into aware of your blog via Google,
    and located that it is truly informative. I’ll be grateful when you proceed this in future.
    Numerous other people shall be benefited out of your writing.
    Cheers!

  6. lawerence says:

    It’s going to be ending off mine day, but before end I am reading this fantastic article to
    improve my know-how.

  7. tin can making machine says:

    I like the valuable info you provide in your articles.
    I will bookmark your bblog and check again hee regularly.
    I’m quite certain I will learn lots of new stuff right here!

    Best of luck for the next!

  8. C Tool says:

    Oh my goodness! Awesome article dude! Thanks,However

  9. DR says:

    You’re so awesome! I don’t thinjk I’ve read through something like this before.
    So wonderful to find someone wkth a few genuine thoughts on this issue.
    Really.. many thanks for starting this up. This site is one thing that
    is required on the internet, someone with a little originality!

  10. kavin says:

    What’s up i am kavin, its my first occasion to commenting anyplace, when i read this piece of writing i thought i
    could also make comment due to this brilliant paragraph.

  11. marciatompson says:

    This web sit truly has all of the information and facts I wanted concerning this
    subject and didn’t know who to ask.

  1. August 26, 2019

    […] Especially if you want to show an app on a big TV without user intervention. Check out post on how-to-create-a-picture-carousel-in-powerapps which includes an addition feature on scrolling […]

Leave a Reply

Your email address will not be published. Required fields are marked *