How to add an image carousel

[Z_Mike1]

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

[RandyHayes]

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. 

[Z_Mike1]

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?

[RandyHayes · Accepted solution]

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.

[Z_Mike1]

That did the trick.  Thanks!

[edgar3tres]

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?

[RandyHayes]

@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.

[edgar3tres]

@RandyHayes 

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

[RandyHayes]

@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.

[edgar3tres]

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