input[type=radio] {
	
position: absolute;
left:-9999px
	}
	
	
	
.cadre-slider{ 
width:100%;
max-width: 1200px;
overflow: hidden;
aspect-ratio: 3/2;
position: relative;
border-radius: 0rem;
margin: 2rem 0rem 0rem 0rem;

	}	
	

@supports not (aspect-ratio:3/2){
		
.slider-ar {

padding-top: 66.67%;
		
	}
		
		
	}	
	
.cadre-slide {
	
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
will-change: transform;
transition: transform .6s;
	
}
	
.slide{
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;overflow:hidden;}
	
.slide img{display:block;width:100%;height:100%;object-fit: contain;}



	
.slide:nth-of-type(1){transform:translate3d(000%,0,0)}
.slide:nth-of-type(2){transform:translate3d(100%,0,0)}
.slide:nth-of-type(3){transform:translate3d(200%,0,0)}	
.slide:nth-of-type(4){transform:translate3d(300%,0,0)}	
.slide:nth-of-type(5){transform:translate3d(400%,0,0)}
.slide:nth-of-type(6){transform:translate3d(500%,0,0)}
.slide:nth-of-type(Hai0){transform:translate3d(000%,0,0)}
	

.slider:nth-of-type(2):checked ~ .cadre-slide{transform:translate3d(-100%,0,0);}
.slider:nth-of-type(3):checked ~ .cadre-slide{transform:translate3d(-200%,0,0);}
.slider:nth-of-type(4):checked ~ .cadre-slide{transform:translate3d(-300%,0,0);}
.slider:nth-of-type(5):checked ~ .cadre-slide{transform:translate3d(-400%,0,0);}
.slider:nth-of-type(6):checked ~ .cadre-slide{transform:translate3d(-500%,0,0);}
	

.figcaption{
	
position:absolute;
transition: transform .4s .4s;
will-change: transform;
transform:translate3d(0,-100%,0);
background-color:var(--Color0);
top: 0px;
left: 0px;
right: 0px;
height: auto;
display: flex;
align-items: auto;
justify-content: auto;
color:var(--Color0T);
z-index: 3;
padding-top: 0em;
padding-bottom: 0em;
margin-top: 0em;
}

.figcaption .Titre {
	color: var(--Color1);
	z-index: 1;	
	
	padding-left: 1rem;
}
.figcaption .Auteur {
	color: var(--Color3);;
	text-transform: uppercase;
	z-index: 2;
	padding-right: 0.5em;

}
.figcaption .Description {
	position:absolute;
	color: skyblue;
	text-align: right;
	background-color:var(--Color0);
	top: 0%;
	left: 50%;
	right: 0px;	
	width: 50%;
	max-height: 30px;
	overflow: hidden;
	-webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;
    transition:max-height 1s;
	display: block;
	
	border-radius: 0rem 0rem 0rem 0.75rem;
	color:grey;
	padding: 0vh 2vh 2vh 2vh;
}

.figcaption .Description:hover{
	max-height: 1000px;
}



.slider:nth-of-type(1):checked ~ .cadre-slide .slide:nth-of-type(1) .figcaption,
.slider:nth-of-type(2):checked ~ .cadre-slide .slide:nth-of-type(2) .figcaption,	
.slider:nth-of-type(3):checked ~ .cadre-slide .slide:nth-of-type(3) .figcaption,	
.slider:nth-of-type(4):checked ~ .cadre-slide .slide:nth-of-type(4) .figcaption,
.slider:nth-of-type(5):checked ~ .cadre-slide .slide:nth-of-type(5) .figcaption,
.slider:nth-of-type(6):checked ~ .cadre-slide .slide:nth-of-type(6) .figcaption



{transform: translate3d(0,0%,0)}



	
	
	.slider:nth-of-type(1):checked ~  .cadre-miniatures label:nth-of-type(1),
	.slider:nth-of-type(2):checked ~  .cadre-miniatures label:nth-of-type(2),
	.slider:nth-of-type(3):checked ~  .cadre-miniatures label:nth-of-type(3),
	.slider:nth-of-type(4):checked ~  .cadre-miniatures label:nth-of-type(4),
	.slider:nth-of-type(5):checked ~  .cadre-miniatures label:nth-of-type(5),
	.slider:nth-of-type(6):checked ~  .cadre-miniatures label:nth-of-type(6),
	.slider:nth-of-type(Hai0):checked ~  .cadre-miniatures label:nth-of-type(Hai0),	

	.slider:nth-of-type(7):checked ~  .cadre-miniatures label:nth-of-type(7)
	{
		
		
	box-shadow: 0 0 0 3px #000;
	transform: scale(1);
	
	}


	
	
.cadre-miniatures {
	
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
left: 0; 
right: 0;
 
}
	
.miniatures {
	
transition: transform .25s;
transform: scale(.9);
aspect-ratio: 1;
width: 40px;
border-radius: 0spx;
z-index: 2;
cursor: pointer;
margin: 0 .5rem 0;
	
}
	
.miniatures img{
	
background-color: #fafafa;
object-fit: cover;
display:block;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px solid white	
	}
	
@supports not (aspect-ratio:1)	{
		
.miniatures {height:30px}	
		
	}
	
.miniatures:hover {
	transform: scale(1);
 
}
.Espace{
	display: block;
	width: 100%;
	height: 4rem;
	margin-bottom: 8rem;
}

Copier code

Partager la démonstration :
Partager sur Facebook
Partager sur Twitter
Partager sur Linkedin
Voir sur ce blog :

Réaliser une galerie d'images avec CSS

Autres slider

Auteur : Guillaume Duverger