# Image Slide show in perspective

**URL:** <https://forum.inductiveautomation.com/t/image-slide-show-in-perspective/54083>\
**Category:** Ignition\
**Created:** [December 14, 2021, 7:08am UTC](https://forum.inductiveautomation.com/t/image-slide-show-in-perspective/54083 "2021-12-14T07:08:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ajaykumar\_Unhale](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@Ajaykumar\_Unhale](https://forum.inductiveautomation.com/u/Ajaykumar_Unhale)\
**Post date:** [December 14, 2021, 7:08am UTC](https://forum.inductiveautomation.com/t/image-slide-show-in-perspective/54083/1 "2021-12-14T07:08:13Z")

</div>

Hello,

I have different part number like At01, At02, At03 and so on. for each part one or two images is assigned.  
So when I select part number then particular image is display this is work(In perspective) but here each part has only one image. Image format I use is jpg  
but Now I need to do following task

**If part number is selected and part has two different images so, how can we make slide show for images one after one for every 5 sec in one image component**

All work in perspective

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 14, 2021, 9:11am UTC](https://forum.inductiveautomation.com/t/image-slide-show-in-perspective/54083/2 "2021-12-14T09:11:22Z")

</div>

Make a flex repeater that instantiates views containing your images.  
That view should have a ‘img\_source’ parameter.  
On the flex repeater, create a custom prop that holds the sources to your images, like that:

```python
[
    ['image 1a', 'image 1b'],
    ['image 2'],
    ['image 3'],
    ['image 4a', 'image 4b']
]

```

and a custom prop that holds the index of the currently viewed set of images.  
then, on the `instances` prop of your flex repeater, add an expression binding that looks like this:

```python
{this.custom.data}[{this.custom.current_view}]

```

and add a script transform:

```python
return [{'img_source': img} for img in value]

```

You can skip the transform altogether if you directly make `custom.data` an array of dicts containing the key, like so:

```python
[
    [{'img_source': 'image1'}],
    [{'img_source': 'image2a'}, {'img_source': 'image2b'}],
    [{'img_source': 'image3'}],
    [{'img_source': 'image4a'}, {'img_source': 'image4b'}]
]

```

Now you only have to change `custom.current_view` to go from one set of images to another. Maybe with buttons that increment or decrement it, or with a timer, anything you want.  
Just make sure to check for bounds, so you don’t try to display something that doesn’t exist.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 14, 2021, 4:53pm UTC](https://forum.inductiveautomation.com/t/image-slide-show-in-perspective/54083/3 "2021-12-14T16:53:45Z")

</div>

Could also use a [Carousel](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Carousel) for some extra UI to be automatically added.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 15, 2021, 7:49am UTC](https://forum.inductiveautomation.com/t/image-slide-show-in-perspective/54083/4 "2021-12-15T07:49:54Z")

</div>

Didn’t know that existed, but I’m not surprised. Should have checked that first !