Dernière modification : décembre 2022
Le code :
<div class=cadre-slider>
<div class="slider">
<input class="slideshow" type="radio" id="slide1" name="slideshow" checked="checked">
<input class="slideshow" type="radio" id="slide2" name="slideshow">
<input class="slideshow" type="radio" id="slide3" name="slideshow">
<input class="slideshow" type="radio" id="slide4" name="slideshow">
<input class="slideshow" type="radio" id="slide5" name="slideshow">
<span class="slide"></span>
<span class="slide"></span>
<span class="slide"></span>
<span class="slide"></span>
<span class="slide"></span>
<div class="cadre-miniatures">
<label class="miniatures" for="slide1"></label>
<label class="miniatures" for="slide2"></label>
<label class="miniatures" for="slide3"></label>
<label class="miniatures" for="slide4"></label>
<label class="miniatures" for="slide5"></label>
</div>
</div>
</div>
*,*::before,*::after{box-sizing: border-box}
input[type=radio] {
position: absolute;
left:-9999px
}
.cadre-slider{
max-width: 600px;
overflow: hidden;
aspect-ratio:3/2;
position: relative;
border-radius: 5px;
margin: 4rem auto;
}
@supports not (aspect-ratio:3/2){
.slider {
padding-top: 66.67%;
}
}
.slide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
will-change: opacity;
transition: opacity .6s
}
.slide:nth-of-type(1)::before,
.slide:nth-of-type(2)::before,
.slide:nth-of-type(3)::before,
.slide:nth-of-type(4)::before,
.slide:nth-of-type(5)::before{
content: '';
width: 0;
height: 100%;
position: absolute;
top: 0;
left: -100%;
filter: blur(30px);
background: hsla(0, 0%, 100%, 0.6);
will-change:transform;
transform: skewX(-20deg)}
.slideshow:nth-of-type(1):checked ~ .slide:nth-of-type(1)::before,
.slideshow:nth-of-type(2):checked ~ .slide:nth-of-type(2)::before,
.slideshow:nth-of-type(3):checked ~ .slide:nth-of-type(3)::before,
.slideshow:nth-of-type(4):checked ~ .slide:nth-of-type(4)::before,
.slideshow:nth-of-type(5):checked ~ .slide:nth-of-type(5)::before{
left: 200%;
width: 20%;
transition: all 1.8s cubic-bezier(.6,1,.4,1)
}
.slideshow:nth-of-type(1):checked ~ .slide:nth-of-type(1),
.slideshow:nth-of-type(2):checked ~ .slide:nth-of-type(2),
.slideshow:nth-of-type(3):checked ~ .slide:nth-of-type(3),
.slideshow:nth-of-type(4):checked ~ .slide:nth-of-type(4),
.slideshow:nth-of-type(5):checked ~ .slide:nth-of-type(5){
bottom: 0;
right: 0;
opacity:1;
}
.slideshow:nth-of-type(1):checked ~ .cadre-miniatures .miniatures:nth-of-type(1),
.slideshow:nth-of-type(2):checked ~ .cadre-miniatures .miniatures:nth-of-type(2),
.slideshow:nth-of-type(3):checked ~ .cadre-miniatures .miniatures:nth-of-type(3),
.slideshow:nth-of-type(4):checked ~ .cadre-miniatures .miniatures:nth-of-type(4),
.slideshow:nth-of-type(5):checked ~ .cadre-miniatures .miniatures:nth-of-type(5){
opacity: 1;
}
.cadre-miniatures {
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
.miniatures {
background-color: #fafafa;
aspect-ratio:1;
width:30px;
width: clamp(30px,4vw,60px);
border-radius: 50%;
z-index: 2;
cursor: pointer;
opacity: 0.35;
margin: 0 .5rem 0;
}
@supports not (aspect-ratio:1) {
.miniatures{height:30px}
}
.miniatures:hover {
opacity: 0.75;
}
.slide:nth-of-type(1),
.slider .cadre-miniatures .miniatures:nth-of-type(1) {
background: url("image.jpg") no-repeat center/cover
}
.slide:nth-of-type(2),
.slider .cadre-miniatures .miniatures:nth-of-type(2) {
background: url("image.jpg") no-repeat center/cover;
}
.slide:nth-of-type(3),
.slider .cadre-miniatures .miniatures:nth-of-type(3) {
background: url("image.jpg") no-repeat center/cover;
}
.slide:nth-of-type(4),
.slider .cadre-miniatures .miniatures:nth-of-type(4) {
background: url("image.jpg") no-repeat center/cover;
}
.slide:nth-of-type(5),
.slider .cadre-miniatures .miniatures:nth-of-type(5) {
background: url("image.jpg") no-repeat center/cover;
}