Коротко — проблема почти наверняка не в «тени», а в том, как слайдер/верстка прячут невидимые карточки: тень обрезается предком с overflow:hidden или вы прячете не те элементы (слайдер клонирует слайды и пересчитывает ширины). Вариантов решения несколько — приведу причины и практические способы исправить.
Почему тень обрезается / скрытие не работает
- Родительский элемент (viewport/track слайдера) имеет overflow: hidden — это обязательно обрезает тень, выходящую за границы дочернего блока.
- Слайдер (Slick, Swiper, Owl и т.п.) может клонировать слайды для loop, и вы скрываете исходные элементы, а видимые клонированные остаются.
- Если вы прячете карточки display:none, слайдер может пересчитать ширины/кол-во слайдов и поменять логику, или не увидеть изменения, если нужно вызвать update/recalc.
- Если вы добавляете padding/margin, то при расчёте ширин слайдера контент сжимается — тень остаётся «вне» видимой области или размер карточки меняется.
Практичные решения (по приоритету)
1) Правильный (рекомендуемый): удалить/скрыть слайды через API слайдера
- Большинство библиотек имеют методы removeSlide / remove / update / reInit. Удалите 4–6 через API и затем вызовите update/rebuild. Тогда слайдер «знает», что у него только 3 слайда и стрелки/переходы будут работать корректно, тень не будет обрезана.
- Примеры:
- Slick: $('.slider').slick('slickRemove', index) или destroy и заново инициализировать с нужными слайдами.
- Swiper: swiper.removeSlide([3,4,5]); swiper.update();
- Owl: owl.trigger('remove.owl.carousel', [index]); owl.trigger('refresh.owl.carousel');
- Если слайдер клонирует слайды, при удалении через API он корректно уберёт клонированные версии.
2) Если нельзя удалить слайды — скрывайте «правильно»
- Не используйте простое display:none на оригинальном элементе, если слайдер использует копии.
- Применяйте opacity:0 + pointer-events:none для визуального скрытия (занимают место, но не кликабельны) — но это не решит отключение стрелок/пересчёта.
- Лучше: использовать API слайдера, чтобы отключить навигацию/блокировать правую стрелку при totalSlides <= slidesToShow.
3) Если тень обрезается из‑за overflow:hidden, разместите «запас» тени внутрь ширины слайда
- Сделайте так, чтобы тень рисовалась внутри области, которая не выходит за viewport. То есть добавьте внутренний отступ (padding) у самого слайда и учтите это при расчёте ширины.
- Пример подхода:
- .slide { box-sizing: border-box; padding: 8px; } — тогда тень может оказаться внутри padding и не выходить за край.
- Если слайдер рассчитывает процентную ширину, пересчитайте её: width: calc(100% / 3); и используйте gap вместо внешних margin, чтобы не ломать общую ширину.
- Важно: включите box-sizing: border-box, чтобы padding не уменьшал видимую ширину карточки по расчётам слайдера.
4) Альтернативный трюк — не обрезать viewport, а маскировать внешние слайды «слоем»
- Оставить overflow: visible (чтобы тени не обрезались), но поверх по краям сделать «маскирующие» блоки (pseudo-element) с фоновым цветом контейнера, которые закроют части слайдов вне центра. Это сложнее, но позволяет тени быть видимыми, не ломая логику слайдера.
5) Если проблема — клонирование: обращайте внимание на .slick-cloned / .swiper-slide-duplicate
- При попытке CSS‑скрытия убедитесь, что вы меняете видимость и для клонированных версий, либо работайте через API.
6) Вариант: инсетная тень или имитация тени внутри карты
- Используйте inset-shadow или псевдоэлемент внутри карточки, который создаёт видимость «приподнятости», но тень не выходит за пределы карточки. Визуально это может отличаться, но технически безопасно.
Краткая пошаговая инструкция для вашего случая
1. Если хотите просто показывать 3 карточки и отключить листание — удалите/удалите слайды 4–6 через API слайдера или полностью инициализируйте слайдер заново с 3 карточками.
2. Если нужно временно скрыть 4–6, используйте методы слайдера (removeSlide / update) или скрывайте клоны тоже (.slick-cloned и т.д.).
3. Если по дизайну тень должна «вылезать» за пределы карточки, сделайте padding у .slide и box-sizing: border-box; подгоните ширины/gap так, чтобы тень была внутри «коробки» и не обрезалась overflow: hidden.
4. Если не получается подогнать ширины из‑за логики слайдера — вариант с удалением и реконструкцией слайдера проще и надежнее.
Если хотите, пришлите HTML/CSS структуры и название слайдера (и фрагмент инициализации). По ним могу дать точный CSS/JS‑патч (пример для Slick/Swiper/Owl) с нужными селекторами и командами.