Проблема с анимацией при ховере на карусели swiper
Суть проблемы:
Дизайнер придумал такую анимацию что при ховере на слайд он увеличивается а остальные слайды рядом уменьшаются так что бы 4 слайда (на десктопе) заполняли всю ширину слайдера. Сейчас это относительно работает, но если начать листать то слайдер ломается при наведении на любой из слайдов. Вызвано это тем что при ховере на этот слайд у всех слайдов уменьшается ширина.
Задача:
Написать функцию которая бы расчитывала на какой слайд мы навелись, узнавала бы его индекс, и уже с этими данными расчитывала соседей (3 штуки на десктопе) и давала бы им стили уменьшения ширины, главному слайду (на который мы соотвественно навелись) давался стиль увеличения ширины.
Демо как это работает:
Ссылка на код:
https://codesandbox.io/p/sandbox/billowing-platform-z6f4jv?file=%2Ftsconfig.json%3A29%2C1
P.S: Решение через IntersectionObserver не предлагать) оно глючное).
Я бы сам написал функцию, но плохо учил математику в школе :( ...точнее вообще не учил.
Возможно есть какие-то другие решения, не через функцию с формулой