Need to create a carousel or slideshow in Powerapps gallery.

(1) Share

Report

Posted on by Iantaylor2050

603

I have powerapps with SharePoint as the datasource. I have 8 image columns namely Image1, Image2, Image3 and so on.

I need to create a collection and use this collection as the Gallery datasource and create a slideshow with previous and next arrow. I tried creating a collection but it doesnt work. May i know where i am going wrong?

Collection

Collect(
 MyImageCollection;{Name:"Image1.png"; contentBytes: Image1};
 {Name:"Image2.png"; contentBytes: Image2};
 {Name:"Image3.png"; contentBytes: Image3};
 {Name:"Image4.png"; contentBytes: Image4}
)

Categories:

Connector development

Building Power Apps

AI Builder

Error handling

GCC, GCCH, DoD - Federal App Makers (FAM)

Microsoft Dataverse with Power Apps

Experimental features

Governance & administering

Power Apps Pro Dev & ISV

Power Query

General topics

I have the same question (0)

All responses (4)

Answers (1)

Sort by

Suggested answer

Vish WR 3,605 on at

Like (0)

Report
Copy link

Link copied!

@Iantaylor2050

The issue with your current approach is that SharePoint image columns return an object with a url property, not raw bytes. Using contentBytes in the collection won't resolve to anything the Image control can render, which is why it breaks.

Also for a slideshow with next/previous arrows, you don't actually need a gallery at all. A single Image control with a counter variable is simpler and works better for this.

On the screen's OnVisible, initialise a counter:

UpdateContext({imgIndex: 1})

Add a single Image control and set its Image property to:

Switch(

imgIndex,

1, Image1,

2, Image2,

3, Image3,

4, Image4,

5, Image5,

6, Image6,

7, Image7,

8, Image8

)

For your Next arrow button OnSelect:

UpdateContext({imgIndex: If(imgIndex >= 8, 1, imgIndex + 1)})

For your Previous arrow button OnSelect:

UpdateContext({imgIndex: If(imgIndex <= 1, 8, imgIndex - 1)})

This loops around when it hits the first or last image. If you still want a collection-based approach, the correct way is to store the image URLs as text, not contentBytes:

ClearCollect(

MyImageCollection,

{Order: 1, Img: Image1},

{Order: 2, Img: Image2},

{Order: 3, Img: Image3},

{Order: 4, Img: Image4}

)

Then set your Image control's Image property to LookUp(MyImageCollection, Order = imgIndex, Img).

The counter approach is recommended since you already know you have exactly 8 columns.

For a full walkthrough with auto-scroll and indicators added on top: https://www.c-sharpcorner.com/article/how-to-create-an-infinite-scrolling-image-carousel-in-powerapps/

Vishnu WR

LinkedIn - My Tech Space

Please ✅ Does this answer your question if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider answering Yes to Was this reply helpful? or give it a Like ♥

Was this reply helpful? Yes No
Suggested answer

11manish 2,983 on at

Like (0)

Report
Copy link

Link copied!
The issue is that SharePoint Image columns are not stored as raw image bytes, so using contentBytes in your collection won't work. SharePoint Image columns usually return a record containing image metadata and URLs.

Instead, create a collection using the image values directly:

ClearCollect( colImages, { Image: ThisItem.Image1 }, { Image: ThisItem.Image2 }, { Image: ThisItem.Image3 }, { Image: ThisItem.Image4 } )

If some image columns may be blank, use Table() and Filter() to exclude empty images before adding them to the collection.

Set:

Gallery Items = colImages

Image Control = ThisItem.Image

For a slideshow:

Store the current image position in a variable (e.g., varCurrentImage)

Use Previous/Next buttons to increment or decrement the index

Display the current image using:

Last(FirstN(colImages, varCurrentImage)).Image

Also, if you're using SharePoint's modern Image column type, inspect the field using:

JSON(ThisItem.Image1)

You may need to reference a specific property such as .Full or .Large instead of the image field directly, depending on the structure returned.

Was this reply helpful? Yes No
Verified answer

WarrenBelz 155,686 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Hi @Iantaylor2050,

I have a blog that I believe does exactly what you need, with the images fading in and out. It uses the images stored in your Media, however there is no reason you could not use the image field files (just hide Image Controls on the screen with the content in them).

Please ✅ Does this answer your question if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider answering Yes to Was this reply helpful? or give it a Like ♥

Visit my blog Practical Power Apps LinkedIn

Was this reply helpful? Yes No
Kushal_M 251 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!

Hello @Iantaylor2050,

Your collection syntax is fine, but in a SharePoint form/gallery, Image1, Image2, etc. are usually fields of the current record. You need to reference the record explicitly and filter out blank images.

ClearCollect(
MyImageCollection,
{Name:"Image1", Image: ThisItem.Image1},
{Name:"Image2", Image: ThisItem.Image2},
{Name:"Image3", Image: ThisItem.Image3},
{Name:"Image4", Image: ThisItem.Image4},
{Name:"Image5", Image: ThisItem.Image5},
{Name:"Image6", Image: ThisItem.Image6},
{Name:"Image7", Image: ThisItem.Image7},
{Name:"Image8", Image: ThisItem.Image8}
);

RemoveIf(MyImageCollection, IsBlank(Image));

Set the Gallery.Items property to : MyImageCollection

For slideshow navigation:

Next button

Set(varIndex,
If(varIndex < CountRows(MyImageCollection),
varIndex + 1,
1
)
)

@Iantaylor2050

Set(varIndex,
If(varIndex > 1,
varIndex - 1,
CountRows(MyImageCollection)
)
)

Image control

Last(FirstN(MyImageCollection, varIndex)).Image

If your SharePoint image columns are modern Image columns, the field may need to be referenced as: ThisItem.Image1.Full instead of ThisItem.Image1. That's the most common reason the collection appears not to work.

Was this reply helpful? Yes No