Cannot put two slider carousels on same page

Issues
1

I am using the Slider Carousel component.

Whenever I add a second one of this component, it does not work. When I go to it’s settings and I try to change which slide it is actively on, it doesn’t update the slide number it is on for that 2nd component, but visually it changes the slide that it is on for the first slider component. Next, when you preview the page or go to the live page, the second slider component never changes slides, it just stays stuck on the first slide. I believe this StackOverflow post details why this is occurring, but I am unable to change the JS for the slider component since it is a Plasmic package, so I have no idea how to fix this issue.

Reproduction steps:

  1. add 1 slider component to your page
  2. add a 2nd slider component to the page.
  3. Preview the page and notice that the second slider component doesn’t switch between slides, only the first slider component.

Relevant links:

2

I wasn’t able to reproduce this issue. Could you create a fresh project demonstrating the issue?

3

I’m surprised there weren’t anymore posts about this.

The issue is with ‘slider carousel’ and ‘marquee carousel’. If you place two of either of these components on the same page, and add arrows/any function to switch the slides, it will not work for the second component or however many more there are, meaning you can’t have more than one of these components on the same page.

I’ve read that you need to re-target the CSS and wrap them in a box with a different HTML identifier but I have not tried this yet.

Really, the components should have a simple ‘id’ prop field or the standard HTML Attributes field to give custom ID’s. It seems it’s an ID issue.

Any no-code or official solutions appreciated