.jangu-slider {
position: relative;
width: 100%;
max-width: 1800px; aspect-ratio: 1800 / 800;
margin: 0 auto 50px;
overflow: hidden;
background: transparent; container-type: inline-size;
outline-offset: -3px;
user-select: none;
-webkit-user-select: none;
}
.jangu-slider__track,
.jangu-slider__slide {
position: absolute;
inset: 0;
} .jangu-slider__slide {
visibility: hidden;
overflow: hidden;
}
.jangu-slider__slide.is-active,
.jangu-slider__slide.is-leaving {
visibility: visible;
}
.jangu-slider__slide.is-active { z-index: 2; }
.jangu-slider__slide.is-leaving { z-index: 1; }
.jangu-slider__slide.is-entering { will-change: transform; } .jangu-slider__strips {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.jangu-slider__strip {
position: absolute;
overflow: hidden;
}
.jangu-slider__strip-inner {
position: absolute;
inset: 0;
will-change: transform;
}
.jangu-slider__strip-inner img {
position: absolute; } .jangu-slider .jangu-slider__img,
.jangu-slider .jangu-slider__strip-inner img {
display: block !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
object-fit: contain !important;
object-position: 50% 50% !important; cursor: default !important;
-webkit-user-drag: none;
}
.jangu-slider .jangu-slider__img {
position: absolute; left: 0;
top: 0;
width: 100%;
height: 100%;
} .jangu-slider__caption {
position: absolute;
inset: 0;
pointer-events: none;
}
.jangu-slider__cap {
position: absolute; height: 5.556cqw;
font: normal 2.778cqw/5.556cqw Arial, sans-serif;
text-align: center;
border-radius: 0.28cqw;
white-space: nowrap;
opacity: 0;
}
.jangu-slider__cap--dark {
left: 28.22%;
top: 35.88%;
width: 19.44%; color: #eee;
background: rgba(0, 0, 0, 0.75);
}
.jangu-slider__cap--light {
left: 50.56%;
top: 36.13%;
width: 22.22%; color: #444;
background: #fff;
}
.jangu-slider__slide.is-animating .jangu-slider__cap--dark {
animation: jangu-cap-up 2.25s linear forwards;
}
.jangu-slider__slide.is-animating .jangu-slider__cap--light {
animation: jangu-cap-down 2.25s linear forwards;
} @keyframes jangu-cap-up {
0%    { opacity: 0; transform: translateY(0) scale(0); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
44.4% { opacity: 1; transform: translateY(0) scale(1); }
66.7% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
100%  { opacity: 0; transform: translateY(-36cqw) scale(1); }
}
@keyframes jangu-cap-down {
0%    { opacity: 0; transform: translateY(0) scale(0); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
44.4% { opacity: 1; transform: translateY(0) scale(1); }
66.7% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
100%  { opacity: 0; transform: translateY(36cqw) scale(1); }
} .jangu-slider__arrow {
position: absolute;
top: 50%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-top: -24px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
color: #fff;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease, background-color 0.2s ease;
}
.jangu-slider__arrow--prev { left: 16px; }
.jangu-slider__arrow--next { right: 16px; }
.jangu-slider__arrow svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.jangu-slider:hover .jangu-slider__arrow,
.jangu-slider:focus-within .jangu-slider__arrow {
opacity: 1;
}
.jangu-slider__arrow:hover,
.jangu-slider__arrow:focus-visible {
background: rgba(0, 0, 0, 0.6);
} .jangu-slider__dots {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
z-index: 3;
display: flex;
justify-content: center;
gap: 10px;
}
.jangu-slider__dot {
width: 12px;
height: 12px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
background: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: background-color 0.2s ease;
}
.jangu-slider__dot:hover,
.jangu-slider__dot.is-active {
background: #fff;
} @media (hover: none) {
.jangu-slider__arrow { opacity: 0.8; width: 36px; height: 36px; margin-top: -18px; }
.jangu-slider__arrow svg { width: 20px; height: 20px; }
}
@media (max-width: 600px) {
.jangu-slider__arrow { width: 32px; height: 32px; margin-top: -16px; }
.jangu-slider__arrow--prev { left: 8px; }
.jangu-slider__arrow--next { right: 8px; }
.jangu-slider__arrow svg { width: 18px; height: 18px; }
.jangu-slider__dots { bottom: 8px; gap: 8px; }
.jangu-slider__dot { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.jangu-slider__slide.is-animating .jangu-slider__cap { animation: none; opacity: 1; }
}