How To Create An Infinite Scrolling Image Carousel In PowerApps

Introduction

In this article, we will learn how to develop an image carousel in the canvas app in PowerApps. We will also see some advanced features like auto-scrolling effects, indicators controls. etc. We can also call it an image carousel. Here we can make use of image control, arrow icons, and a timer to auto-scroll the images. Let's see how to create it in simple steps as below.

Step 1 - Create a collection of images

OnVisible property of a screen, we will use a clearCollect function to create a collection of images. Also, use an order column to define the sequence of images. Here we have initialized the collection named imgCol. It has two properties, img for storing the image path and order for storing the sorting order.

We are also setting a context variable named as currentImg which will store the current sort order of the image.

ClearCollect(
    imgCol,
    {
        img: "https://picsum.photos/id/1/340/100?table1.png",
        order: 1
    },
    {
        img: "https://picsum.photos/id/2/340/100?table2.png",
        order: 2
    },
    {
        img: "https://picsum.photos/id/3/340/100?table3.png",
        order: 3
    },
    {
        img: "https://picsum.photos/id/4/340/100?table4.png",
        order: 4
    },
    {
        img: "https://picsum.photos/id/5/340/100?table5.png",
        order: 5
    }
);
UpdateContext({currentImg: 1})

Step 2 - Add an Image control

Add an image control on your screen and set the image property to:

LookUp(imgCol,order=currentImg).img

• width = Parent.Width to show the full-width image
• height = 400
• X and Y = 0

The above LookUp function will lookup the image where order is equal to currentImg value. By default, it will start from the first image because we have set the currentImg = 1 in step 1.

Step 3 - Add left and right arrows

We will use the arrow icons to show the next and previous icons as shown below:

Step 4 - Update the order of the image on click of next and previous arrows

Now we need to write a logic to change the image on click of next and previous arrows.

• OnSelect property of the next arrow
  
  we will increment the current image order by 1. If the current image order is maximum of order, we will start from the first index again to have an infinite scroll.

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

• OnSelect property of the previous arrow,
  
  we will decrement the current image order by 1. If the current image order is a minimum order, we will start from the last index again to have an infinite scroll.

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

Next arrow

Previous arrow

Now your image carousel is ready to go.

The next steps are advanced steps (and optional steps) where you can add carousel indicators, auto-scrolling effect, etc.

Step 5 - Add carousel controls or indicators using gallery

1. Add a blank horizontal gallery (Gallery7) with data source = imgCol and set the properties as shown below:
   • width = CountRows(Gallery7.AllItems)*(Self.TemplateWidth+Self.TemplatePadding)
     • Here we are setting the dynamic width of the gallery by counting the total images and multiplying it by the template width of the gallery
   • height = 40
   • X = Image2.Width/2-Self.Width/2 (here the Image2 is the image control that we have added in step 2)
     • This will align the gallery to the center of the image.
   • Y = Image2.Y+Image2.Height-Self.Height
     • This will set the vertical position of the gallery to the bottom of the image
        
2. Now we need to add the indicators for the carousel. Add a circle shape which will look like indicators from the icons section. Set the properties of the circle as shown below:
   • height and width = 20
     • This will make the circle small in size and will look like an indicator.
   • X and Y = 0
   • border = 1 and Black
     • This will set the border to the circle
   • color = If(ThisItem.order=currentImg,Black,WhiteSmoke)
     • This will show different color to the circle based on active image order

Once you configure the gallery with indicators, it will look like below:

Step 6 - Logic to show the image based on indicator click

Now we will update the OnSelect property of the circle indicator to show the specific image

UpdateContext({currentImg:ThisItem.order})

Here we are updating the currentImg context variable to the order of the clicked indicator.

Step 7 - Add auto-rotation to the image carousel:

To add the auto-scroll effect, we will use the timer control (Timer4). Update the properties of arrows, indicators, and timer control as below:

a) Right arrow OnSelect property to

Here we will use the timerGo context variable. This variable will help us to reset the timer time. currentImg context variable will be incremented by 1

UpdateContext({currentImg:If(currentImg=Max(imgCol,order),1,currentImg+1)});
UpdateContext({timerGo:false});
Reset(Timer4);
UpdateContext({timerGo:true});

b) Left arrow OnSelect property to

currentImg context variable will be decremented by 1. Similarly, timerGo will help us to reset the Timer time.

UpdateContext({currentImg:If(currentImg=1,Max(imgCol,order),currentImg-1)});
UpdateContext({timerGo:false});
Reset(Timer4);
UpdateContext({timerGo:true});

c) Indicators OnSelect property to

currentImg will be set to order of the indicator.

UpdateContext({currentImg:ThisItem.order});
UpdateContext({timerGo:false});
Reset(Timer4);
UpdateContext({timerGo:true});

d) OnVisible property of the screen

ClearCollect(
    imgCol,
    {
        img: "https://picsum.photos/id/1/340/100?table1.png",
        order: 1
    },
    ...
);
UpdateContext({currentImg: 1});
UpdateContext({timerGo:true});

e) Timer control

• Duration = 4000 (i.e. 4 seconds)
  • This is the duration for the next image to appear automatically. You can change as per your need.
• OnTimerEnd = UpdateContext({currentImg:If(currentImg=Max(imgCol,order),1,currentImg+1)});
  • This will increment the currentImg value after every 4 seconds. 
• Repeat = true
  • This will repeat the timer so that it will update the currentImg value 
• AutoStart = true
  • This will start timer automatically on screen load.
• AutoPause = false
  • This will help us to never stop the auto-scrolling effect.
• Start = timerGo
  • as stated earlier, timerGo will help to start the timer again after resetting.
• Visible = false
  • This will just hide the timer.

Final output

In this way, we have developed the image carousel (image gallery) in PowerApps. I hope you have liked this article. Please let me know if you have any doubts in the comment section below. Have a nice day!