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
Super User
Super User

Re: How to add an image carousel

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.

View solution in original post

10 REPLIES 10
Super User
Super User

Re: How to add an image carousel

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.
Z_Mike1
Frequent Visitor

Re: How to add an image carousel

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?

Super User
Super User

Re: How to add an image carousel

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.

View solution in original post

Z_Mike1
Frequent Visitor

Re: How to add an image carousel

That did the trick.  Thanks!

edgar3tres Helper II
Helper II

Re: How to add an image carousel

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?

Super User
Super User

Re: How to add an image carousel

@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.
edgar3tres Helper II
Helper II

Re: How to add an image carousel

@RandyHayes 

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

collections.PNG

Highlighted
Super User
Super User

Re: How to add an image carousel

@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.
edgar3tres Helper II
Helper II

Re: How to add an image carousel

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

Helpful resources

Announcements
MBAS Gallery 2020

MBAS Gallery 2020

Watch Microsoft Business Applications Summit sessions on-demand.

firstImage

New Ranks and Rank Icons released on April 21!

The time has come: We are finally able to share more details on the brand-new ranks coming to the Power Apps Community!

Top Solution Authors
Top Kudoed Authors
Users online (7,158)