Не работает тень + слайдер, есть варианты?

Question

[Homkadesigner]

Есть слайдер, который переключает карточки с документами на главной странице.
Всего 6 документов в слайдере. Из них только 3 отображается в экране.
Левая стрелка не активна, Правая стрелка переключает ровно 1 документ (1 карточку).
Например: видно карточки 1,2,3 - нажатие на правую стрелку покажет документ 4, а 1 документ скрывается.
На каждой карточке есть изначальная тень. Если мы задаем в css - hidden - скрываем карточки 4,5,6 - то тень обрезается.
Если мы задаем в js скрытие - то оно не работает.
Если задавать при hidden - паддинги или маргини - то они либо режут тень, либо карточки будут меньше по ширине и получается дизбалас с заголовком и стрелками, у них общая ширина становится меньше.
Есть ли хоть какой-то вариант оставить тень и чтобы слайдер правильно работал, скрывал карточки 4,5,6 и переключение работало?
Уже перепробовал 3 разных слайдера и не работает ничего.

Comments

[VoidVolker]

Homkadesigner песочницу в студию, будьте любезны.

[Homkadesigner]

Проблема в том, что тень не внизу, у него нет сдвига по x, y. Из-за этого обрезается при любом раскладе

[Telcontar]

Homkadesigner, код покажите

[Maryam Sultan]

Классическая проблема с `overflow: hidden` и тенями в слайдерах.

Самый надежный способ, чтобы верстка не поехала — использовать внутреннюю обертку. Не вешай `box-shadow` на сам корневой элемент слайда.

Вместо этого оберни весь контент карточки в дополнительный внутренний `div`. Пусть слайдер управляет внешним блоком (он отвечает за ширину и скрытие), а на внутренний `div` задай тень и `margin` (например, `margin: 15px`, чтобы компенсировать размах тени).

Так тень физически не будет доставать до краев скрывающего контейнера и обрезаться, а общая ширина карточек и баланс со стрелками останутся идеальными. (Кстати, если еще не тестил, Swiper.js обычно решает это из коробки через правильные паддинги на враппере).

Answer 1

[Пума Тайланд]

Проблема не в слайдере — overflow:hidden и есть причина. Он всегда режет box-shadow, потому что тень технически "вылезает" за границы элемента.

Фикс: добавь паддинг на viewport слайдера и скомпенсируй отрицательным маргином:

.slider-viewport {
  overflow: hidden;
  padding: 20px;  /* ≥ blur + spread + offset твоей тени */
  margin: -20px;
  box-sizing: border-box;
}

Карточки 4–6 скрывать не нужно — они просто уходят за край viewport'а. Двигай весь трек через transform: translateX(), тогда и JS-скрытие не понадобится.

p.s. display:none на карточках ломает расчёт ширин слайдера — отсюда и "не работает".

Comments

[Homkadesigner]

Все равно viewport - режет тень 3 карточки, и все равно не ровным блок получается. Как ни крути, но решения нет, чтобы 3 карточки были по ширине самого блока, при этом не резалась тень и работал слайдер.
Он обрезает тень 3 карточки, а при клике на стрелку - обрезает левой карточки. Я писал, что паддинги и маргини тоже не сработаю.
По сути все равно не будет ровно по блоку

[Homkadesigner]

Вот режеться справа слева. Если задать большие отступы, то отображение 3 карточек уже будет не по ширине блока, либо меньше, либо больше. Это уже визуально нарушает структуру.

[Пума Тайланд]

Скорее всего над viewport ещё один предок с overflow:hidden — проверь в devtools. Или замени box-shadow на filter: drop-shadow() — он через overflow не режется.

[Homkadesigner]

Пума Тайланд,
.slider-wrapper {
overflow: hidden;
width: 100%;
position: relative;
}

/* Внутренний viewport — тени не режутся */
.slider-viewport {
overflow: visible !important; /* ← тени видны */
padding: 30px 0;
margin: 0;
box-sizing: border-box;
position: relative;
width: 100%;
}
/* Трек — двигаем */
.slider-track {
display: flex;
gap: 20px;
transition: transform 0.5s ease;
width: 100%;
}

/* Карточки — ровно 3 в ряд */
.slider-track .doc-card {
flex: 0 0 calc((100% - 40px) / 3);
max-width: calc((100% - 40px) / 3);
min-width: calc((100% - 40px) / 3);
box-sizing: border-box;
padding: 10px;
}
.doc-card {
background: var(--white);
padding: 20px 16px;
border: 1px solid #CCCCCC;
border-radius: 16px;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)); /* ← не обрезается */
height: 240px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
transition: 0.3s ease;
box-sizing: border-box;
}

.doc-card:hover {
border-color: var(--accent-gold) !important;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15)) !important;
transform: translateY(-4px) !important;
}

Если убрать у slider-wrapper hidden, то карточки отображаются все, а не скрываются. А если оставить hidden - то тень режется

[Homkadesigner]

Пума Тайланд, лан, сделаю без теней. Все это грустно. Убираем hidden у слайдер - карточки вываливаются, оставляем тени режутся и через падинги и через отрицательный маргин. Если скрывать через js - тоже вываливаются карточки или работают не правильно.

[Пума Тайланд]

Homkadesigner, не сдавайся — overflow-x: hidden; overflow-y: visible на wrapper + padding: 20px 0; margin: -20px 0, тени снизу/сверху выживут.

[Ibrahim Khalil]

Это классическая проблема: overflow: hidden всегда режет box-shadow. Чтобы сохранить тень и не сломать ширину сетки (дисбаланс с заголовком), используйте паддинг для тени и компенсируйте его отрицательным марджином на обертке слайдера.

/* Обертка вашего слайдера */
.slider-container {
overflow: hidden; /* Скрывает 4,5,6 карточки */
padding: 15px; /* Дает место для тени (укажите размер вашей тени) */
margin: -15px; /* Возвращает ширину на место, выравнивая с заголовком */
}

/* Сама карточка */
.card {
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Ваша тень */
}

Этот метод позволяет тени "дышать" внутри контейнера, корректно скрывает лишние слайды и не нарушает общую ширину страницы.