Dernière mise à jour : décembre 2022
Votre navigateur ne prend pas en charge cette démonstration.
<div class="cadre-slider">
<input class="slider" type="radio" name="slide" id="un" checked>
<input class="slider" type="radio" name="slide" id="deux">
<input class="slider" type="radio" name="slide" id="trois">
<input class="slider" type="radio" name="slide" id="quatre">
<input class="slider" type="radio" name="slide" id="cinq">
<div class="fleches">
<label class="controles precedent" for="cinq"></label>
<label class="controles suivant" for="deux"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="un"></label>
<label class="controles suivant" for="trois"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="deux"></label>
<label class="controles suivant" for="quatre"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="trois"></label>
<label class="controles suivant" for="cinq"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="quatre"></label>
<label class="controles suivant" for="un"></label>
</div>
<div class=no-aspect>
<div class="image image-1">
<img src="image1.jpg" alt="">
</div>
<div class="image image-2">
<img src="image2.jpg" alt="">
</div>
<div class="image image-3">
<img src="image3.jpg" alt="">
</div>
<div class="image image-4">
<img src="image4.jpg" alt="">
</div>
<div class="image image-5">
<img src="image5.jpg" alt="">
</div>
</div>
<div class="controle-bas">
<label for="un" class="un"></label>
<label for="deux" class="deux"></label>
<label for="trois" class="trois"></label>
<label for="quatre" class="quatre"></label>
<label for="cinq" class="cinq"></label>
</div>
</div>
*{box-sizing: border-box}
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 10deg;
}
input[type=radio] {
position: absolute;
left:-9999px /*appearance : none*/
}
label{cursor: pointer}
.cadre-slider{
margin:4rem auto;
position: relative;
max-width: 600px;
aspect-ratio:3/2;
border-radius: .75rem;
overflow: hidden;
}
@supports not (aspect-ratio:3/2){
.no-aspect {
padding-top: 66.67%;
}
}
.image{
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.image img{
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image:
conic-gradient(
#fff 0deg,
#fff calc(var(--angle) - 10deg),
transparent calc(var(--angle) - 10deg),
transparent 360deg
);
transition: --angle .4s ease-in-out;
}
#un:checked ~ .no-aspect .image-1 img,
#deux:checked ~ .no-aspect .image-1 img,
#deux:checked ~ .no-aspect .image-2 img,
#trois:checked ~ .no-aspect .image-1 img,
#trois:checked ~ .no-aspect .image-2 img,
#trois:checked ~ .no-aspect .image-3 img,
#quatre:checked ~ .no-aspect .image-1 img,
#quatre:checked ~ .no-aspect .image-2 img,
#quatre:checked ~ .no-aspect .image-3 img,
#quatre:checked ~ .no-aspect .image-4 img,
#cinq:checked ~ .no-aspect .image-1 img,
#cinq:checked ~ .no-aspect .image-2 img,
#cinq:checked ~ .no-aspect .image-3 img,
#cinq:checked ~ .no-aspect .image-4 img,
#cinq:checked ~ .no-aspect .image-5 img{
--angle: 360deg;
-webkit-mask-image:
conic-gradient(
#fff 0deg,
#fff var(--angle),
transparent var(--angle),
transparent 360deg
);
}
.controle-bas{
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
}
.controle-bas label{
border: 2px solid white;
width:14px;
width: clamp(.875rem,2vw,1.25rem);
aspect-ratio:1;
margin: 0 .5rem;
border-radius: 50%;
transition: background-color .3s;
}
@supports not (aspect-ratio:1){
.controle-bas label{height:14px}
}
#un:checked ~ .controle-bas .un,
#deux:checked ~ .controle-bas .deux,
#trois:checked ~ .controle-bas .trois,
#quatre:checked ~ .controle-bas .quatre,
#cinq:checked ~ .controle-bas .cinq{
background-color: white;
}
.fleches{display: none}
.slider:nth-of-type(1):checked ~ .fleches:nth-of-type(1),
.slider:nth-of-type(2):checked ~ .fleches:nth-of-type(2),
.slider:nth-of-type(3):checked ~ .fleches:nth-of-type(3),
.slider:nth-of-type(4):checked ~ .fleches:nth-of-type(4),
.slider:nth-of-type(5):checked ~ .fleches:nth-of-type(5){
display: block;
opacity: 1;
}
.controles {
height: 30px;
width: 30px;
margin-top: -15px;
top: 50%;
position: absolute;
display: block;
border-width: 5px 5px 0 0;
border-style: solid;
border-color: #f2f2f2;
opacity: 0.6;
z-index:1;
}
.controles:hover {
opacity: 1;
}
.precedent {
left: .875rem;
transform: rotate(-135deg);
}
.suivant {
right: .875rem;
transform: rotate(45deg);
}