Это классическая проблема: overflow: hidden всегда режет box-shadow. Чтобы сохранить тень и не сломать ширину сетки (дисбаланс с заголовком), используйте паддинг для тени и компенсируйте его отрицательным марджином на обертке слайдера.
/* Обертка вашего слайдера */
.slider-container {
overflow: hidden; /* Скрывает 4,5,6 карточки */
padding: 15px; /* Дает место для тени (укажите размер вашей тени) */
margin: -15px; /* Возвращает ширину на место, выравнивая с заголовком */
}
/* Обертка вашего слайдера */
.slider-container {
overflow: hidden; /* Скрывает 4,5,6 карточки */
padding: 15px; /* Дает место для тени (укажите размер вашей тени) */
margin: -15px; /* Возвращает ширину на место, выравнивая с заголовком */
}
/* Сама карточка */
.card {
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Ваша тень */
}
Этот метод позволяет тени "дышать" внутри контейнера, корректно скрывает лишние слайды и не нарушает общую ширину страницы.