cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Frequent Visitor

How to add an image carousel

I have 3 images that I want to add to my app as a carousel.  This is an example:  https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

 

How do I create a carousel with the images stored within my app as opposed to having the images stored somewhere else?

 

Thanks

1 ACCEPTED SOLUTION

Accepted Solutions

Yes.  Just need to add a timer and set the properties for it how you like (duration, etc.)

Then take the exact function I gave you for the "Next" navigation icon OnSelect and put it in the Timer OnTimerEnd action.  Also, throw in a statment to restart the timer and...boom...you have an automatic image carousel.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

10 REPLIES 10
Super User III
Super User III

Add the images into your media if you want them as part of the App. Browse and add each one and note its name.

Create an Image control.

Add navigation arrows and/or navigation bubbles.

Use the actions of the navigation controls to "rotate" (choose the next or previous) the image in the control.

You could set an easy collection with the images and then keep a pointer to current.

 

Here is what I have done:

 

Someplace...OnVisible or other place:

  Collect(imgList,
             {img:imgName1, order:1},
             {img:imgName2, order:2},

             {img:imgName3, order:3});
  UpdateContext{currentImg:1})

 

 

In your image control Image property:

  Lookup(imgList, order=currentImg).Img

 

In your right arrow navigation:

  UpdateContext({currentImg:If(currentImg=Max(imgList, order), 1, currentImg+1)})

 

In your left arror navigation:

  UpdateContext({currentImg:If(currentImg=1, Max(imgs, order), currentImg-1)})

 

Hope this is of some assistance. 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

Thank you for your response.  That worked like a charm.  I didn't include this in my original question, but have you created a carousel that automatically rotated through a timer?

Yes.  Just need to add a timer and set the properties for it how you like (duration, etc.)

Then take the exact function I gave you for the "Next" navigation icon OnSelect and put it in the Timer OnTimerEnd action.  Also, throw in a statment to restart the timer and...boom...you have an automatic image carousel.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

That did the trick.  Thanks!

Hi,

 

I'm trying to do something similar but I cannot make the imges appear, did you did something different on the formula?

 

This is what I have

-On Screen Visible:

Collect(UltraList,
{img: VerticalTee, order:1},
{img:'VerticalTee (chamber)', order:2},
{img:WyeInsertionU, order:3},
{img:'WyeInsertion (chamber)', order:4},
UpdateContext({currentImg:1}))

 

-Image Control

Image = LookUp(UltraList, order=currentImg).img

 

am I doing something wrong?

@edgar3tres 

Formula looks good. 

You mentioned you put this in the OnVisible...has that executed?  Go to another screen and then come back to this screen - that will cause the OnVisible to execute.

Also, check your View->Collections and see what the UltraList collection looks like...does it have what you expect in it.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

@RandyHayes 

Actually my collection doesn't show the pictures, this is how it looks, any idea why?

collections.PNG

@edgar3tres 

Actually, the collection looks wrong - you have three columns in that collection - should only have 2.

So, I looked closer at your Formula...there is an issue.  It should be this:

ClearCollect(UltraList,
  {img: VerticalTee, order:1},
  {img:'VerticalTee (chamber)', order:2},
  {img:WyeInsertionU, order:3},
  {img:'WyeInsertion (chamber)', order:4});

UpdateContext({currentImg:1})

The change of Collect to ClearCollect was not the issue (that is just what you'll need for this going forward rather than Collect).  The issue was that your UpdateContext statement was part of your Collection.  That's where the Value column was coming from in the Collection picture.

Change to the above and you should see the collection with the images and the order columns only.  Images should appear then.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

Yes, that worked! thanks so much for your help!!

Helpful resources

Announcements
secondImage

Experience what’s next for Power Apps

Join us for an in-depth look at the new Power Apps features and capabilities at the free Microsoft Business Applications Launch Event.

Power Apps Community Call

Power Apps Community Call: February

Did you miss the call? Check out the Power Apps Community Call here.

New Power Super Users

Congratulations!

We are excited to announce the Power Apps Super Users!

New Badges

New Solution Badges!

Check out our new profile badges recognizing authored solutions!

Top Kudoed Authors
Users online (71,632)