Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Slider CSS (pseudo-classe :target)

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
		
	}




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.