Creating a Centered Slider with Active Element 2x Size

[brandbrilliance]

I designed a slider for our website and coded it in JS to show how it should look. However the developers are struggling to get this to work.

https://codepen.io/brandbrilliance/full/QWXgqjw

• centerered
• auto-width (since the active element is 2x)
• gap must be the same, and not have the active element overlap the other slides (so active slide pushed out the others, not overlap it, so transform: scale() can't be used.

We tried to use onSlideChange, and then calling Update(), otherwise the active slide has a 2x width, but the centre position isn't calculate correctly. However when we add this update, it destroys the transition and the slider just immediately "jumps" to the new slide, without scrolling smoothing, whilst animating the widths.

I was able to code it myself in just plain JS with my limited abilities (ok, it's not responsive, touch, drag, etc.) but it works like I want it to. Is this even possible in SwiperJS?

Maybe there is another way to animate the width enlarge and request the slider to update the sizes without breaking the smooth transition?