Guillaume Duverger - Développement & Graphisme - Blog

Slider en pur CSS

• 
• 
• 
• 

description1

description2

description3

description4

Code :

<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}

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 :

CSS transforms 2d