Dernière modification : août 2022
<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">
<div class="fleches">
<label class="controles precedent" for="slide5"></label>
<label class="controles suivant" for="slide2"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="slide1"></label>
<label class="controles suivant" for="slide3"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="slide2"></label>
<label class="controles suivant" for="slide4"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="slide3"></label>
<label class="controles suivant" for="slide5"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="slide4"></label>
<label class="controles suivant" for="slide1"></label>
</div>
<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>
*,*::before,*::after{box-sizing: border-box}
input[type=radio] {
appearance: none
}
.slider {
aspect-ratio:3/2;
max-width: 600px;
overflow: hidden;
position: relative;
border-radius: 5px;
margin: 4rem auto;
}
.fleches,
.slideshow {
display: none;
}
.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:'';
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
background-image: repeating-radial-gradient(circle at 17% 32%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) var(--a));
mix-blend-mode: hard-light;
opacity: 0;}
.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{
animation:blur .4s ;
--a: 0.0009px;
}
.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
}
@keyframes blur{
0%{opacity: 1;filter: blur(100px)}
80%{opacity: 1;filter: blur(0px)}
100%{opacity: 0;filter: blur(0px)}
}
.slideshow:nth-of-type(1):checked ~ .fleches:nth-of-type(1),
.slideshow:nth-of-type(2):checked ~ .fleches:nth-of-type(2),
.slideshow:nth-of-type(3):checked ~ .fleches:nth-of-type(3),
.slideshow:nth-of-type(4):checked ~ .fleches:nth-of-type(4),
.slideshow:nth-of-type(5):checked ~ .fleches:nth-of-type(5){
display: block;
}
.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;
}
.controles {
height: 30px;
width: 30px;
margin-top: -15px;
top: 50%;
position: absolute;
display: block;
cursor: pointer;
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);
}
.cadre-miniatures {
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
.miniatures {
background-color: #fafafa;
aspect-ratio:1;
width: clamp(30px,4vw,60px);
border-radius: 50%;
z-index: 2;
cursor: pointer;
opacity: 0.35;
margin: 0 .5rem 0;
}
.miniatures:hover {
opacity: 0.75;
}
.slide:nth-of-type(1),
.slider .cadre-miniatures .miniatures:nth-of-type(1) {
background-image: url("image1.jpg");
background-size: cover;
background-position: center;
}
.slide:nth-of-type(2),
.slider .cadre-miniatures .miniatures:nth-of-type(2) {
background-image: url("image2.jpg");
background-size: cover;
background-position: center;
}
.slide:nth-of-type(3),
.slider .cadre-miniatures .miniatures:nth-of-type(3) {
background-image: url("image3.jpg");
background-size: cover;
background-position: center;
}
.slide:nth-of-type(4),
.slider .cadre-miniatures .miniatures:nth-of-type(4) {
background-image: url("image4.jpg");
background-size: cover;
background-position: center;
}
.slide:nth-of-type(5),
.slider .cadre-miniatures .miniatures:nth-of-type(5) {
background-image: url("image5.jpg");
background-size: cover;
background-position: center;
}