.jb-slider {
--jb-slider-ratio: 16 / 9;
--jb-slider-fit: cover;
position: relative;
width: 100%;
max-width: 100%;
margin: 1rem auto;
background: #151515;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
isolation: isolate;
}
.jb-slider:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.jb-slider__viewport {
overflow: hidden;
}
.jb-slider__track {
display: flex;
width: 100%;
transition: transform 0.55s ease;
will-change: transform;
}
.jb-slider__slide {
position: relative;
flex: 0 0 100%;
width: 100%;
aspect-ratio: var(--jb-slider-ratio);
margin: 0;
background: #151515;
overflow: hidden;
}
.jb-slider__image {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: var(--jb-slider-fit);
object-position: center;
}
.jb-slider__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 2.25rem 1rem 0.75rem;
color: #fff;
font-size: 0.95rem;
line-height: 1.4;
text-align: center;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.78));
}
.jb-slider__arrow {
position: absolute;
top: 50%;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.48);
box-shadow: none;
font: inherit;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.jb-slider__arrow:hover,
.jb-slider__arrow:focus-visible {
background: rgba(0, 0, 0, 0.78);
transform: translateY(-50%) scale(1.06);
}
.jb-slider__arrow:focus-visible,
.jb-slider__dot:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.jb-slider__arrow:disabled {
opacity: 0.3;
cursor: default;
}
.jb-slider__arrow--prev {
left: 12px;
}
.jb-slider__arrow--next {
right: 12px;
}
.jb-slider__dots {
position: absolute;
z-index: 4;
left: 50%;
bottom: 12px;
display: flex;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
transform: translateX(-50%);
}
.jb-slider:has(.jb-slider__caption) .jb-slider__dots {
bottom: 48px;
}
.jb-slider__dot {
display: block;
width: 10px;
height: 10px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
background: transparent;
box-shadow: none;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.jb-slider__dot[aria-current="true"] {
background: #fff;
transform: scale(1.18);
}
.jb-slider-notice {
padding: 0.8rem 1rem;
border-left: 4px solid #dba617;
background: #fff8dd;
}
@media (max-width: 600px) {
.jb-slider {
border-radius: 9px;
}
.jb-slider__arrow {
width: 38px;
height: 38px;
font-size: 1.25rem;
}
.jb-slider__arrow--prev {
left: 8px;
}
.jb-slider__arrow--next {
right: 8px;
}
.jb-slider__caption {
font-size: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.jb-slider__track,
.jb-slider__arrow,
.jb-slider__dot {
transition: none;
}
}