cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Z_Mike1
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 below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

View solution in original post

12 REPLIES 12
RandyHayes
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 below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

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 below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

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 below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

@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 below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

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

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Carousel April Dunnam Updated 768x460.jpg

Urdu Hindi D365 Bootcamp

Dont miss our very own April Dunnam’s The Developer Guide to the Galaxy! Find out what the Power Platform has to offer for the traditional developer.

Top Solution Authors
Top Kudoed Authors
Users online (2,179)