Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Lightbox/slideshow/slider

Slideshow en CSS3

Code :

HTML


<ul class=slideshow>
<li><img src="1.jpg" alt></li>
<li><img src="2.jpg" alt></li>
<li><img src="3.jpg" alt></li>
</ul>


CSS


*{-webkit-box-sizing:border-box;box-sizing:border-box}

	img {max-width: 100%;}
	
.slideshow [src]{
margin:0;
padding:0;
list-style-type: none;
position: absolute;
opacity: 0;
left: 0;
animation: slide 9s linear infinite

}
    
.slideshow{

position: relative;
overflow: hidden;
width: 600px;
height: 300px;
margin: auto;
border: 10px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.4)

}

.slideshow [src="2.jpg"]{


animation-delay: 3s

}

.slideshow [src="3.jpg"]{


animation-delay: 6s

}


/*animations-source originale http://playground.deaxon.com*/
@keyframes slide{

0%{

opacity: 0

}

12%{

opacity: 1;
transform: scale(1.03)

}

25%{

opacity: 1;
transform: scale(1.06);

}

37% {

opacity: 0;
transform: scale(1.30);

}

100% {

opacity:0;

}

}


HTML


<ul class="diapo">
<li><img src="" alt></li>
<li><img src="" alt></li>
<li><img src="" alt></li>
<li><img src="" alt></li>
</ul>


CSS


*{box-sizing:border-box}


img {max-width: 100%;}



.diapo{

position: relative;
border:5px solid #fff;
box-shadow:0 1px 4px rgba(0,0,0,.4);
height:100%;
width:100%;
max-width:600px;
overflow:hidden;
max-height:400px;
margin:0;
padding: 0;
list-style-type: none
	
	}
	
	
.diapo li{

top:0;
left:0;
position: absolute;
opacity: 0
	
	}
	

	.diapo li{object-fit: cover}
	
	
.diapo li:nth-child(1),
.diapo li:nth-child(2),
.diapo li:nth-child(3),
.diapo li:nth-child(4){
	
	animation:slide1 20s ease infinite
	
	}
	
.diapo li:nth-child(2){
	
	animation-delay: 5s
	
	}
.diapo li:nth-child(3){
	
	animation-delay: 10s
	
	}
	
.diapo li:nth-child(4){
	
	animation-delay: 15s
	
	}
    
@keyframes slide1{
	
	0%{
	
	transform: scale(5);
	opacity: 0
	
	}
	
12%{
	transform: scale(1);
	opacity: 1;
	
	
	}
	
25%{
	transform: scale(1);
	opacity: 1;

	
	}
	
37%{
	transform: scale(2);
	opacity: 0;
	
	
	}
	
100%{
	transform: scale(0);
	opacity: 0
	
	}
	
	}


Support navigateurs :

CSS animations

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.