Как корректно отобразить тень у слайдов карусели?

Question

[Vladislav]

Как корректно отобразить тень у слайдов карусели? Использовал slick, owl carousel, swiper.js, но у всех своё ограничение viewport контейнера и тень обрезается. Вот как получилось используя Slick:



Задал padding для отступа сверху и снизу чтобы не обрезало, а вот по бокам не срабатывает такая штука.

И вот как надо в макете:



Как это решить?

Answer 1

[alalala]

контейнеру карусели задай внутренние отступы
т.к у многих контейнеров стоит значение overflow:hidden
что и обрезает эту тень

Comments

[Vladislav]

они уже заданы на скрине, бесполезно

[alalala]

Vladislav, не там заданы
задай где серое поле

[Vladislav]

alalala, задал 'swiper-wrapper' та же фигня, вот скрин, про который ты имел ввиду?

Answer 2

[Kittinat]

Думаю что автор вопроса уже нашел как решить эту проблему, но не поделился с окружающими).
Для тех кто в будущем столкнется с этой проблемой.

Обвертке (swiper) задать паддинг и такой же отрицательный горизонтальный маргин (если в этом есть необходимость). Паддинг обеспечит отступ у контейнера с overflow и не "скушает" тень.

Но у нас остаются боковые "ушки" от слайдов, которые спрятаны, в данном случае нашла только такое решение:
- задать всем слайдам `opacity: 0`
- задать всем видимым слайдам `opacity: 1`
- задать параметр watchSlidesProgress: true данный параметр будет добавлять класс на видимые слайды
- так же можно задать свой класс параметром slideVisibleClass: 'my-class-visible'
И "ушек" будет не видно

Answer 3

[ALEXX4891]

Я задал такое свойство(owl carousel), это решило проблему с тенью:
.owl-stage-outer {
padding: 7px;
}
Еще думаю можно обернуть каждую карточку в div и задать ему падинги.