Applying Scale to Active Slide Causes Scrolling Offset

[SgiobairOg]

Hello all. I'm building a center focused coverflow slider and having an issue. If you target the is-active class with some CSS such as scale(1.2, 1.2) this throws off the scaling for the rest of the slides. The first slide will load centered and scaled, but the next slide will end up further to the left (for example) than the first slide, then the following slide, etc.

My assumption here is that on each click of the next button we are calculating the distance from the left edge of one slide to the left edge of the next and that that distance is used to figure out how far the slide should move.

I think a solution here (assuming I'm correct about the cause) would be to have the javascript responsible "back out" and transform styles on the slide before calculating that new distance.

I'm looking through the repo now to see how the slide positions are determined but not having much luck finding it. So wondering can anyone point me to the place in the code where this move distance is figured. I'd be happy to open a PR that adds accounting for transforms either by default or as an option. I just don't have time at the moment to pick through and find how it all works.

OR

In the case I'm missing something obvious can someone point me to properties, or an event, that would allow us to scale slides without causing problems. As another problem I run into is that the scaled slide overflows the track and is cut off.

Thanks all!

[NaotoshiFujita]

You can do this:

1. Add a div inside each slide, and scale it instead of a slide element itself
2. Add enough padding top and bottom to the track element

The result will be the slider on the top of my site (https://splidejs.com/).

[SgiobairOg]

I knew I should have tried that before asking. I was thinking about it while I typed 🙃

Thanks for the hint!