Dernière modification : décembre 2022
<div class="slider">
<input type="radio" name="slider-3d" id="slider1" checked>
<input type="radio" name="slider-3d" id="slider2">
<input type="radio" name="slider-3d" id="slider3">
<input type="radio" name="slider-3d" id="slider4">
<input type="radio" name="slider-3d" id="slider5">
<label for="slider1">
<img src="image.jpg" alt>
</label>
<label for="slider2">
<img src="image.jpg" alt>
</label>
<label for="slider3">
<img src="image.jpg" alt>
</label>
<label for="slider4">
<img src="image.jpg" alt>
</label>
<label for="slider5">
<img src="image.jpg" alt>
</label>
</div>
*{box-sizing:border-box}
img{max-width:100%;display:block}
.slider {
position: relative;
max-width:clamp(60%,(100vw - 64rem)*1000,600px) ;
aspect-ratio:3/2;
margin: 5rem auto;
perspective: 600px;
transform-style: preserve-3d;
text-align: center;
}
.slider input[name="slider-3d"]{
position: relative;
appearance: none;
top: -40px;
left: 0;
display: inline-block;
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
cursor: pointer;
}
input[name="slider-3d"]:checked {
background-color:#6753ea
}
input[name="slider-3d"]:not(:checked){
background-color:#c3c3c3
}
.slider label {
position: absolute;
left: 0;
top: 0;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 400ms cubic-bezier(0.6, -1, 0.4, 1.5);
}
#slider1:checked ~ label[for=slider1],
#slider2:checked ~ label[for=slider2],
#slider3:checked ~ label[for=slider3],
#slider4:checked ~ label[for=slider4],
#slider5:checked ~ label[for=slider5] {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
transform: unset;
cursor: unset
}
/* suivant */
#slider1:checked ~ label[for=slider2],
#slider2:checked ~ label[for=slider3],
#slider3:checked ~ label[for=slider4],
#slider4:checked ~ label[for=slider5],
#slider5:checked ~ label[for=slider1] {
box-shadow: 0 6px 12px rgba(0,0,0,.4), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(15%, 0, -100px);
}
#slider1:checked ~ label[for=slider3],
#slider2:checked ~ label[for=slider4],
#slider3:checked ~ label[for=slider5],
#slider4:checked ~ label[for=slider1],
#slider5:checked ~ label[for=slider2] {
box-shadow: 0 1px 4px rgba(0,0,0,.4);
transform: translate3d(30%, 0, -200px);
}
#slider1:checked ~ label[for=slider4],
#slider2:checked ~ label[for=slider5],
#slider3:checked ~ label[for=slider1],
#slider4:checked ~ label[for=slider2],
#slider5:checked ~ label[for=slider3] {
box-shadow: 0 1px 4px rgba(0,0,0,.4);
transform: translate3d(-30%, 0, -200px);
}
/* précédent */
#slider1:checked ~ label[for=slider5],
#slider2:checked ~ label[for=slider1],
#slider3:checked ~ label[for=slider2],
#slider4:checked ~ label[for=slider3],
#slider5:checked ~ label[for=slider4] {
box-shadow: 0 6px 12px rgba(0,0,0, 0.4), 0 2px 2px rgba(0,0,0, 0.2);
transform: translate3d(-15%, 0, -100px);
}