cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted

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
Highlighted
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!
Highlighted

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?

Highlighted

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

Highlighted

That did the trick.  Thanks!

Highlighted

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?

Highlighted

@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!
Highlighted

@RandyHayes 

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

collections.PNG

Highlighted

@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!
Highlighted

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

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (11,505)