Synchronize multiple Carousels on a view

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?

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:

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”:

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:

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
1 Like

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!