gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [디자인QA] 복제된 슬라이드에도 활성화되는 현상 수정

Browse Source
This commit is contained in:
clkim
2025-12-03 19:28:45 +09:00
parent 1b256db1d3
commit dcf5164e2a
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
layers/components/blocks/slide/CenterFocus.vue
View File

@@ -142,12 +142,12 @@ const handleMove = (
transition: transform 0.6s ease-out;
opacity: 0.3;
}
.center-focus:deep(.splide__slide.is-active) {
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
width: var(--banner-width-mo-container);
}
.center-focus:deep(.splide__slide.is-active),
.center-focus:deep(.splide__slide.is-next),
.center-focus:deep(.splide__slide.is-prev) {
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)),
.center-focus:deep(.splide__slide.is-next:not(.splide__slide--clone)),
.center-focus:deep(.splide__slide.is-prev:not(.splide__slide--clone)) {
opacity: 1;
}
@@ -157,7 +157,8 @@ const handleMove = (
background-color: #191919;
transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active) .slide-inner {
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
}
@@ -166,7 +167,9 @@ const handleMove = (
opacity: 0.5;
transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active) .slide-inner .inner-content {
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner
.inner-content {
opacity: 1;
}
@@ -181,10 +184,11 @@ const handleMove = (
width: var(--banner-width-pc);
height: var(--banner-height-pc);
}
.center-focus:deep(.splide__slide.is-active) {
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
width: var(--banner-width-pc-container);
}
.center-focus:deep(.splide__slide.is-active) .slide-inner {
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner {
width: var(--banner-width-pc-active);
height: var(--banner-height-pc-active);
}

10
layers/components/blocks/slide/CenterHighlight.vue
View File

@@ -147,10 +147,11 @@ const handleMove = (
height: var(--banner-height-mo);
transition: all 0.6s ease-out;
}
.center-highlight:deep(.splide__slide.is-active) {
.center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
width: var(--banner-width-mo-container);
}
.center-highlight:deep(.splide__slide.is-active) .slide-inner {
.center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
}
@@ -166,10 +167,11 @@ const handleMove = (
width: var(--banner-width-pc);
height: var(--banner-height-pc);
}
.center-highlight:deep(.splide__slide.is-active) {
.center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
width: var(--banner-width-pc-container);
}
.center-highlight:deep(.splide__slide.is-active) .slide-inner {
.center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner {
width: var(--banner-width-pc-active);
height: var(--banner-height-pc-active);
}