У вас проблема не в верстке, а в геометрии с арифметикой. Сумму заданных вами размеров вообще невозможно вычислить.
gap в процентах приводит к проблемам и по горизонтали, а уж по вертикали почти всегда. За исключением фиксированной высоты.
Отступы в процентах считаются от ширины родителя. Даже вертикальные.
В итоге у вас там написана дичь.
Т.е. сначала нужно разобраться с тем, что вам нужно, в формулировках на родном языке. Потом с геометрией. И только потом писать свойства. И/или js к ним в помощь.
Я бы последнее заменила на кастомное свойство css.
Это позволит не меняя html, потом использовать это изображение в css как угодно, а не только как фон конкретного элемента. Как фон, как маску, как фон псевдоэлемента или передать в дочерний.
Пожалуйста, пример из документации https://swiper6.vercel.app/demos#centered
Если слайдер будет зациклен, то слева тоже будет слайд. А иначе какой вы собираетесь показывать перед первым?
Ну давайте поговорим
1. Я вообще ничего не говорила про высоту.
2. В демке в вопросе высота не меняется.
3. В демке как бы из моего ответа меняется (несмотря на п1)
Нужна фиксированная высота - задавайте фиксированную.
4. Со строками тоже нужно работать. У вас же каждая картинка занимает одну строку.
5. Ещё я там говорила про object-fit. Рекомендую всё таки почитать.
Сначала, перед тем как писать css, нужно разобраться с геометрией и проговорить словами что и как должно себя вести.
Но начните с этого https://www.esolutions.se/en/test