Dernière modification : octobre 2022
description1
description2
description3
description4
<div class="diapo-index">
<ul>
<li><a href="#votre_id1"><img src="image.jpg" alt></a></li>
<li><a href="#votre_id2"><img src="image.jpg" alt></a></li>
<li><a href="#votre_id3"><img src="image.jpg" alt></a></li>
<li><a href="#votre_id4"><img src="image.jpg" alt></a></li>
</ul>
<div class="diapo-index-images">
<div class=description>
<span>description1</span>
<img src="image.jpg" alt>
</div>
<div class=description>
<span>description2</span>
<img src="image.jpg" alt>
</div>
<div class=description>
<span>description3</span>
<img src="image.jpg" alt>
</div>
<div class=description>
<span>description4</span>
<img src="image.jpg" alt>
</div>
</div>
</div>
*{box-sizing:border-box}
ul{
margin:0;
padding: 0;
list-style-type: none
}
.diapo-index{
max-width: 600px;
margin: auto;
overflow-x: hidden
}
.diapo-index-images{
display: flex;
position: relative;
width: 400%;
transition: transform .6s ease-in-out
}
#votre_id1:target ~ .diapo-index .diapo-index-images{
transform:translatex(0)
}
#votre_id2:target ~ .diapo-index .diapo-index-images{
transform:translatex(-25%)
}
#votre_id3:target ~ .diapo-index .diapo-index-images{
transform:translatex(-50%)
}
#votre_id4:target ~ .diapo-index .diapo-index-images{
transform:translatex(-75%)
}
.description{
position:relative;
}
.description span{
position:absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: hsla(0,0%,0%,.6)
}
.diapo-index ul{
list-style:none;
display: flex;
justify-content: space-around;
}
.diapo-index ul li {
padding: .25rem;
display: inline-flex
}
.diapo-index ul li img{
border: 3px solid white;
display: block
}