Slider en pur CSS
Code :
HTML
<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>
CSS
*{box-sizing:border-box}
body{margin: 0}
ul{
margin:0;
padding: 0;
list-style-type: none
}
.diapo-index{
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
}
Support navigateurs :
Vous rencontrez un problème avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.