30 lines
661 B
CSS
30 lines
661 B
CSS
/* ---------- SQUARE BOX ---------- */
|
|
.slider-box{
|
|
position:relative;
|
|
width:320px;
|
|
height:320px;
|
|
border-radius:1.5rem;
|
|
overflow:hidden; /* keeps images inside */
|
|
margin:0 auto;
|
|
}
|
|
|
|
/* ---------- HORIZONTAL TRACK ---------- */
|
|
.slides{
|
|
display:flex; /* side-by-side */
|
|
height:100%;
|
|
transition:transform .6s ease;
|
|
}
|
|
|
|
/* ---------- EACH IMAGE ---------- */
|
|
.slide{
|
|
width:100%; /* 1 image = full box width */
|
|
height:100%;
|
|
object-fit:cover;
|
|
flex-shrink:0;
|
|
}
|
|
|
|
/* ---------- LIGHT BLINK ON SWAP ---------- */
|
|
.slider-box.swap{
|
|
box-shadow:0 0 20px 6px rgba(255,255,255,.35);
|
|
transition:box-shadow .25s;
|
|
} |