How To Create An Infinite Scrolling Image Carousel In PowerApps

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})

LookUp(imgCol,order=currentImg).img

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!