Possible conflict with WordPress or WooCommerce

[seanvandermolen]

I'm trying to get multiple swipers on a single page to work and I've discovered an issue where the unique id swiper generates is applied to the swiper-wrapper, however the aria-controls for next/prev are applied with the last sliders instance id breaking that functionality.

After seeing the default config work in a Codepen, then cloning that and using custom IDs I realized there is something else going on.

https://codepen.io/seanvandermolen/pen/vYmeoWG

I'm wondering if this is a conflict with jQuery and if a solution similar to Bootstrap could work?
https://getbootstrap.com/docs/5.0/getting-started/javascript/#no-conflict-only-if-you-use-jquery

I'm not sure what the next step is for troubleshooting. I have a test site up and running with the minimal plugins for WooCommerce and a simple bootstrap theme.
https://swiper.tpcc.io/

Another issue I ran into. When using a custom class on the container to init each slider there was no unique id or additional classes added to the html. Only when I used a custom ID did things start working.

[nolimits4web]

You mean issue that nav buttons moves every slider? You need to specify the navigation elements in a more specific way for each slider, probably they must have unique selectors too

[seanvandermolen]

Yes, this is true. However, the latest version of the plugin actually does this for you. There is code to generate a random number and it rewrites swiper-wrapper as swiper-wrapper-c848ec9816369ba5 for example. Then with the next, prev buttons it creates an aria-control that references that wrapper. aria-controls="swiper-wrapper-c848ec9816369ba5"

If you'll look at the codepen, you'll see it works with default classes in the html.

Where it doesn't work in my case is in the WP/WC environment all those aria-controls share the same class as the last sliders random number.

I could fix it by manually setting these classes to be unique. But I'm enhancing a plugin product Carousel and it would be a easier to code multiple slider support if Swipers code worked in this environment instead of coding a solution to pass any custom classes in PHP back to CSS.

[nolimits4web]

Because in codepen nav elements are inside of the swiper-container, that is why it works correctly

[seanvandermolen]

This is a lesson to double check other peoples code you build from. This plugin was using an older version of Swiper and I didn't bother to compare that. It's so simple haha. Thank you! and also, for me duh.