Классическая проблема с `overflow: hidden` и тенями в слайдерах.
Самый надежный способ, чтобы верстка не поехала — использовать внутреннюю обертку. Не вешай `box-shadow` на сам корневой элемент слайда.
Вместо этого оберни весь контент карточки в дополнительный внутренний `div`. Пусть слайдер управляет внешним блоком (он отвечает за ширину и скрытие), а на внутренний `div` задай тень и `margin` (например, `margin: 15px`, чтобы компенсировать размах тени).
Так тень физически не будет доставать до краев скрывающего контейнера и обрезаться, а общая ширина карточек и баланс со стрелками останутся идеальными. (Кстати, если еще не тестил, Swiper.js обычно решает это из коробки через правильные паддинги на враппере).
Написано
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Самый надежный способ, чтобы верстка не поехала — использовать внутреннюю обертку. Не вешай `box-shadow` на сам корневой элемент слайда.
Вместо этого оберни весь контент карточки в дополнительный внутренний `div`. Пусть слайдер управляет внешним блоком (он отвечает за ширину и скрытие), а на внутренний `div` задай тень и `margin` (например, `margin: 15px`, чтобы компенсировать размах тени).
Так тень физически не будет доставать до краев скрывающего контейнера и обрезаться, а общая ширина карточек и баланс со стрелками останутся идеальными. (Кстати, если еще не тестил, Swiper.js обычно решает это из коробки через правильные паддинги на враппере).