# Synchronize multiple Carousels on a view

**URL:** <https://forum.inductiveautomation.com/t/synchronize-multiple-carousels-on-a-view/41568>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 16, 2020, 3:27pm UTC](https://forum.inductiveautomation.com/t/synchronize-multiple-carousels-on-a-view/41568 "2020-12-16T15:27:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![daneichelberger](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@daneichelberger](https://forum.inductiveautomation.com/u/daneichelberger)\
**Post date:** [December 16, 2020, 3:27pm UTC](https://forum.inductiveautomation.com/t/synchronize-multiple-carousels-on-a-view/41568/1 "2020-12-16T15:27:35Z")

</div>

I am currently working on a perspective project using multiple carousels on the same view. The number of carousels on the view varies depending on a dropdown that the user selects.

The issue that I am having it that when the user changes the dropdown selection to add more carousels, the new ones cycle at a different time as the others. The rate is the same but offset start time.

Is there a way to synchronize all carousels on a view?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [December 16, 2020, 5:43pm UTC](https://forum.inductiveautomation.com/t/synchronize-multiple-carousels-on-a-view/41568/2 "2020-12-16T17:43:21Z")

</div>

Yes, there is, and it requires a timer script.

The carousel itself should not have autoPlay enabled.

Now create a gateway timer script with a fixed rate(`Project > Gateway Events > Timer Script`). This rate you select is how often the Carousel will change the displayed pane, so you can think of this as the value you would set in `Carousel.props.autoplay.transitionDelay`. The script of the timer script should be something like this:

```auto
system.util.sendMessage("MyProjectName", 'SESSIONUPDATECAROUSELINDEX', scope='S'). # no payload necessary

```

Create a Listener for the SESSION, via Project \> Session Events \> Message and set the Handler name to “SESSIONUPDATECAROUSELINDEX”:

```auto
system.perspective.sendMessage('COMPONENTUPDATECAROUSELINDEX', scope='session'). # no payload necessary

```

Finally, the Carousel needs to have a configured listener. Right-click the Carousel and select “Configure Scripts”. Add a new handler, and set the name to be “COMPONENTUPDATECAROUSELINDEX”. Make sure you set the session checkbox to be enabled.  
The script should do the following:

```auto
self.props.activePane = (self.props.activePane + 1) % len(self.props.views)

```

Note that doing something like this removes the ability to leverage certain behaviors of the Carousel unless you implement the pieces with you own logic:

- you will no longer be able to pause the transition on hover or focus.
- the dots will display the current index, but user interaction with the dots will result in a change to the selected dot followed by a transition to the next index when the timer script next executes, which has the potential to be immediately after.
- `Carousel.props.appearance.reverse` will be ignored.
- You will lose the fancy transition animation we provide, as directly manipulating the index ignores `Carousel.props.behavior.transitionSpeed`

---

<div class="post-metadata">

**Author:** ![daneichelberger](https://avatars.discourse-cdn.com/v4/letter/d/e68b1a/32.png) [@daneichelberger](https://forum.inductiveautomation.com/u/daneichelberger)\
**Post date:** [December 16, 2020, 6:06pm UTC](https://forum.inductiveautomation.com/t/synchronize-multiple-carousels-on-a-view/41568/3 "2020-12-16T18:06:46Z")

</div>

Thanks for the response. I was afraid that would be the case, but wanted to ask before I went that route. At least now I can just copy your examples!