Is it possible to intentionally move the prev/active/next classes around?

[cmegown]

Hello,

I'm not sure if this should be considered a bug, yet it doesn't necessarily feel like a feature request either. Maybe I'm just missing something obvious.

Earlier this year I built a mobile product image slider for a client and, for a variety of reasons, it essentially contains all images for all product variants. All slides initially have a class that hides them by default and then based on color, material, or size selections made elsewhere on the page the relevant slides will dynamically toggle that class on or off. Additionally, when any of those selections are made we're updating the slider with swiper.update().

Imagine a slider that has like 100 slides but only 5-10 of them are actually visible at any given time. It's a little wacky but the end result works well. We were also able to utilize standard modules like navigation and pagination without issue.

Recently I've been working on a new feature that allows users to zoom in and pan around on larger, more detailed versions of the same images. For the most part all of this work was accomplished without issue - and then a request came in after the fact to add -/+ buttons to make it clearer than zooming functionality exists.

I created these buttons and got them all wired up using swiper.zoom.in() and swiper.zoom.out(), but they didn't seem to be actually working. I didn't understand why at first until I started to debug using the zoomChange event.

It turns out that an unintended result of visually hiding/showing slides is that the prev/active/next classes never move around. So they're initially set on the first DOM nodes and then the zoom functionality I'm looking for is being executed on whatever slide has the active class.

Is there a built-in way of accounting for this or do I need to come up with some sort of custom solution to fit my needs?

[cmegown]

Alternatively, I'm wondering if anyone has had any success building custom zoom instead of using the zoom.in() and zoom.out() methods? I'm imagining a bit of custom logic using CSS scale() and perhaps attaching the relevant class(es) to the intended slide. Before even starting to tinker around with that idea I'm concerned about the swiper still not truly "knowing" the current slide.

[cmegown]

Update: I wasn't able to come up with a working solution to this particular problem. Despite using swiper.update() - and even trying to destroy/rebuild on the fly - I couldn't force Swiper to update the prev/active/next classes to the slides they needed to be on. I have instead opted to build a custom JSON object that contains all of the products and image data needed for the slider, along with a bit of custom JavaScript + Alpine.js to dynamically render only the slides necessary for the currently selected product.

I know this isn't much of a "solution" for anyone else who may stumble across this discussion, but at least it may save you some time.