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 transition clip-path CSS




<div class="cadre-slider">
<input class="slider" type="radio" name="slide" id="un" checked>
<input class="slider" type="radio" name="slide" id="deux">
<input class="slider" type="radio" name="slide" id="trois">
<input class="slider" type="radio" name="slide" id="quatre">
<input class="slider" type="radio" name="slide" id="cinq">
<div class="fleches">
<label class="controles precedent" for="cinq"></label>
<label class="controles suivant" for="deux"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="un"></label>
<label class="controles suivant" for="trois"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="deux"></label>
<label class="controles suivant" for="quatre"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="trois"></label>
<label class="controles suivant" for="cinq"></label>
</div>
<div class="fleches">
<label class="controles precedent" for="quatre"></label>
<label class="controles suivant" for="un"></label>
</div>

<div class="image image-1">
<img src="image1.jpg" alt="">
</div>
<div class="image image-2">
<img src="image2.jpg" alt="">
</div>
<div class="image image-3">
<img src="image3.jpg" alt="">
</div>
<div class="image image-4">
<img src="image4.jpg" alt="">
</div>
<div class="image image-5">
<img src="image5.jpg" alt="">
</div>

<div class="controle-bas">
<label for="un" class="un"></label>
<label for="deux" class="deux"></label>
<label for="trois" class="trois"></label>
<label for="quatre" class="quatre"></label>
<label for="cinq" class="cinq"></label>
</div>
	
</div>




*{box-sizing: border-box}

input[type=radio] {
	
position: absolute;
left:-9999px
	
	}

label{cursor: pointer}
	
.cadre-slider{
	
margin:10rem auto;
position: relative;
max-width: 600px;
aspect-ratio:3/2
	
}
	
	
.image{
	
position: absolute;
width: 100%;
height: 100%;
border-radius: .75rem;
overflow: hidden;
	
}
		
.image img{
	
height: 100%;
width: 100%;
object-fit: cover;
clip-path: inset(0 100% 0 0);
transition: clip-path .4s ease-in-out;

}
	
#un:checked ~ .image-1 img,
#deux:checked ~ .image-1 img,
#deux:checked ~ .image-2 img,
#trois:checked ~ .image-1 img,
#trois:checked ~ .image-2 img,
#trois:checked ~ .image-3 img,
#quatre:checked ~ .image-1 img,
#quatre:checked ~ .image-2 img,
#quatre:checked ~ .image-3 img,
#quatre:checked ~ .image-4 img,
#cinq:checked ~ .image-1 img,
#cinq:checked ~ .image-2 img,
#cinq:checked ~ .image-3 img,
#cinq:checked ~ .image-4 img,
#cinq:checked ~ .image-5 img{

clip-path: inset(0 0% 0 0);
	
}


.controle-bas{
	
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
	
}

.controle-bas label{
	
border: 2px solid white;
width:14px;
width: clamp(.875rem,2vw,1.25rem);
aspect-ratio:1;
margin: 0 .5rem;
border-radius: 50%;
transition: background-color .3s;
}
	
#un:checked ~ .controle-bas .un,
#deux:checked ~ .controle-bas .deux,
#trois:checked ~ .controle-bas .trois,
#quatre:checked ~ .controle-bas .quatre,
#cinq:checked ~ .controle-bas .cinq{

 
   background-color: white;
	
}

.fleches{display: none}	

.slider:nth-of-type(1):checked ~ .fleches:nth-of-type(1),
.slider:nth-of-type(2):checked ~ .fleches:nth-of-type(2),
.slider:nth-of-type(3):checked ~ .fleches:nth-of-type(3),
.slider:nth-of-type(4):checked ~ .fleches:nth-of-type(4),
.slider:nth-of-type(5):checked ~ .fleches:nth-of-type(5){
  
display: block;
opacity: 1;
	
	
}
	

.controles {
	
height: 30px;
width: 30px;
margin-top: -15px;
top: 50%;
position: absolute;
display: block;
border-width: 5px 5px 0 0;
border-style: solid;
border-color: #f2f2f2;
opacity: 0.6; 
z-index:1;
	
}
	
.controles:hover {
	
  opacity: 1;
	
}
	
.precedent {
	
  left: .875rem;
  transform: rotate(-135deg);
	
}
	
.suivant {
	
  right: .875rem;
  transform: rotate(45deg);
	
}




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.