Description image 1
Description image 2
Description image 3
Description image 4
Description image 5
Description image 6
<div class="cadre-slider">
<input class="slider" type="radio" id="slide1" name="slider" aria-label="image 1" checked="checked">
<input class="slider" type="radio" id="slide2" name="slider" aria-label="image 2">
<input class="slider" type="radio" id="slide3" name="slider" aria-label="image 3">
<input class="slider" type="radio" id="slide4" name="slider" aria-label="image 4">
<input class="slider" type="radio" id="slide5" name="slider" aria-label="image 5">
<input class="slider" type="radio" id="slide6" name="slider" aria-label="image 6">
<div class=cadre-slide>
<div class="slide"><span class=figcaption>Description image 1</span><img src="/blog/images/1-moyen.jpg" alt=""></div>
<div class="slide"><span class=figcaption>Description image 2</span><img src="/blog/images/2-moyen.jpg" alt=""></div>
<div class="slide"><span class=figcaption>Description image 3</span><img src="/blog/images/3-moyen.jpg" alt=""></div>
<div class="slide"><span class=figcaption>Description image 4</span><img src="/blog/images/4-moyen.jpg" alt=""></div>
<div class="slide"><span class=figcaption>Description image 5</span><img src="/blog/images/5-moyen.jpg" alt=""></div>
<div class="slide"><span class=figcaption>Description image 6</span><img src="/blog/images/6.jpg" alt=""></div>
</div>
<div class="cadre-miniatures">
<label class="miniatures" for="slide1"><img src="/blog/images/1-moyen.jpg" alt></label>
<label class="miniatures" for="slide2"><img src="/blog/images/2-moyen.jpg" alt></label>
<label class="miniatures" for="slide3"><img src="/blog/images/3-moyen.jpg" alt></label>
<label class="miniatures" for="slide4"><img src="/blog/images/4-moyen.jpg" alt></label>
<label class="miniatures" for="slide5"><img src="/blog/images/5-moyen.jpg" alt></label>
<label class="miniatures" for="slide6"><img src="/blog/images/6.jpg" alt></label>
</div>
</div><!-- fin conteneur global -->
*,
*::after,
*::before{
box-sizing: border-box
}
input[type=radio] {
position: absolute;
left:-9999px
}
.cadre-slider{
width:100%;
max-width: 600px;
overflow: hidden;
aspect-ratio:3/2;
position: relative;
border-radius: .75rem;
margin: 4rem auto;
}
@supports not (aspect-ratio:3/2){
.slider-ar {
padding-top: 66.67%;
}
}
.cadre-slide {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
will-change: transform;
transition: transform .6s;
}
.slide{
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;overflow:hidden;}
.slide img{display:block;width:100%;height:100%;}
.slide:nth-of-type(1){transform:translate3d(0,0,0)}
.slide:nth-of-type(2){transform:translate3d(100%,0,0)}
.slide:nth-of-type(3){transform:translate3d(200%,0,0)}
.slide:nth-of-type(4){transform:translate3d(300%,0,0)}
.slide:nth-of-type(5){transform:translate3d(400%,0,0)}
.slide:nth-of-type(6){transform:translate3d(500%,0,0)}
.slider:nth-of-type(2):checked ~ .cadre-slide{transform:translate3d(-100%,0,0);}
.slider:nth-of-type(3):checked ~ .cadre-slide{transform:translate3d(-200%,0,0);}
.slider:nth-of-type(4):checked ~ .cadre-slide{transform:translate3d(-300%,0,0);}
.slider:nth-of-type(5):checked ~ .cadre-slide{transform:translate3d(-400%,0,0);}
.slider:nth-of-type(6):checked ~ .cadre-slide{
transform:translate3d(-500%,0,0);
}
.figcaption{
position:absolute;
transition: transform .4s .4s;
will-change: transform;
transform:translate3d(0,-100%,0);
background-color:rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
right: 0;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color:white
}
.slider:nth-of-type(1):checked ~ .cadre-slide .slide:nth-of-type(1) .figcaption,
.slider:nth-of-type(2):checked ~ .cadre-slide .slide:nth-of-type(2) .figcaption,
.slider:nth-of-type(3):checked ~ .cadre-slide .slide:nth-of-type(3) .figcaption,
.slider:nth-of-type(4):checked ~ .cadre-slide .slide:nth-of-type(4) .figcaption,
.slider:nth-of-type(5):checked ~ .cadre-slide .slide:nth-of-type(5) .figcaption,
.slider:nth-of-type(6):checked ~ .cadre-slide .slide:nth-of-type(6) .figcaption{
transform: translate3d(0,0%,0)
}
.slider:nth-of-type(1):checked ~ .cadre-miniatures label:nth-of-type(1),
.slider:nth-of-type(2):checked ~ .cadre-miniatures label:nth-of-type(2),
.slider:nth-of-type(3):checked ~ .cadre-miniatures label:nth-of-type(3),
.slider:nth-of-type(4):checked ~ .cadre-miniatures label:nth-of-type(4),
.slider:nth-of-type(5):checked ~ .cadre-miniatures label:nth-of-type(5),
.slider:nth-of-type(6):checked ~ .cadre-miniatures label:nth-of-type(6)
{
box-shadow: 0 0 0 3px #000;
transform: scale(1);
}
.cadre-miniatures {
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
}
.miniatures {
transition: transform .25s;
transform: scale(.9);
aspect-ratio: 1;
width: 60px;
border-radius: 9999px;
z-index: 2;
cursor: pointer;
margin: 0 .5rem 0;
}
.miniatures img{
background-color: #fafafa;
object-fit: cover;
display:block;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px solid white
}
@supports not (aspect-ratio:1) {
.miniatures {height:30px}
}
.miniatures:hover {
transform: scale(1);
}