# Change Views in Carousel by scripting

**URL:** <https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985>\
**Category:** Ignition Early Access\
**Created:** [November 16, 2023, 1:52pm UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985 "2023-11-16T13:52:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [November 16, 2023, 1:52pm UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985/1 "2023-11-16T13:52:07Z")

</div>

Hi,  
I want to have my own button for navigating between views in the Carousel instead of the arrows or dots icon. So for this, I tried to change the "props.activePane" but this only changes the view and does NOT show the transition animations.  
So I wonder if there any hidden method or tricks to do the same behavior of pressing dots or arrows

Thanks

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [November 25, 2023, 6:53pm UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985/2 "2023-11-25T18:53:33Z")

</div>

I don't think the component honors transitions when setting the active pane via scripting.

> [@\[IGN-7794\] Carousel transition animation when programmatically changing activePane property?](https://forum.inductiveautomation.com/t/ign-7794-carousel-transition-animation-when-programmatically-changing-activepane-property/74169):
>
> I'm sure I'm missing something obvious here, but I want to control the active pane on a carousel by some buttons embedded within the carousel itself (mostly wanting to use the component solely for the nice slide transitions). I've got the buttons/messages/etc setup so that it changes the activePane property, and the carousel changes to correct view, but it no longer has the slide transition, it just abruptly switches. It seems that animation only triggers when using the dots/arrows... is it poss…

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [March 17, 2025, 6:33pm UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985/4 "2025-03-17T18:33:04Z")

</div>

Hi Nader. Could you provide a snippet of script code that sets-changes the activePane? I would greatly appreciate it. Thank you.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [March 17, 2025, 8:03pm UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985/5 "2025-03-17T20:03:15Z")

</div>

Unfortunately this issue isn't solve yet and there is no scripts to do that

---

<div class="post-metadata">

**Author:** ![steve.nap](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@steve.nap](https://forum.inductiveautomation.com/u/steve.nap)\
**Post date:** [March 17, 2025, 8:22pm UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985/6 "2025-03-17T20:22:00Z")

</div>

Ok, thank you sir.

---

<div class="post-metadata">

**Author:** ![jmeran](https://avatars.discourse-cdn.com/v4/letter/j/46a35a/32.png) [@jmeran](https://forum.inductiveautomation.com/u/jmeran)\
**Post date:** [November 27, 2025, 2:25pm UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985/7 "2025-11-27T14:25:54Z")

</div>

Man I came here with the exact same problem hoping to find a solution. I have a page setup like this:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/338755d3fd03483a9d1f0db5d533824fb5735999.png)

At first I wasn’t using a carousel to change “page”, but I changed my approach to the carousel cause like you I wanted an animation for the change. Pretty sad there’s no solution yet, I wish we could somehow look at the script that the built-in dots and arrows use to change the activePane with an animation

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [November 28, 2025, 4:39am UTC](https://forum.inductiveautomation.com/t/change-views-in-carousel-by-scripting/81985/8 "2025-11-28T04:39:47Z")

</div>

You can use @bmusson module for this. You can use JS arrow function for swiping the view by script:

> [@Musson Industrial's Embr-Periscope Module](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047):
>
> Embr-Periscope An Ignition module that includes design extensions and enhancements for Perspective. A periscope provides a new perspective by allowing users to see over, around, or through obstacles, offering a unique view otherwise obstructed. NOTE: This modules is still in pre-release. All versions before v1.0.0 should be considered unstable. Components [Embedded View +](https://docs.mussonindustrial.com/ignition/embr-periscope/components/embedded-view-plus/) This component is a enhancement of the default Embedded View component with server-side property mapping. In testing, t…

But what I find also here using any type of carousel or even create this purely in perspective, cause a lot of loads as this components need to loads all views at first to be able to add swipe animations. What I do instead is use to embedded view components and change the view myself and add fade out and fade in animations by using CSS opacity animation.
