Slideshow defilement images

Bonjour,
encore une fois je viens vers vous parce que je n'arrive pas a cerner mon problème.
j'essaie de mettre trois images en sildeshow mais les images se positionnent les unes au dessous des autres.
les border sont là parce que j'essaie de définir les zones pour identifier le probleme : echec!
merci pour vos conseils

  <div id="slideshow">
	<ul id="sContent"><!--
		--><li><img src="inaearthnew.jpg" alt="base" /></li><!--
		--><li><img src="perfromers.jpg" alt="performers" /></li><!--
		--><li><img src="selectors.jpg" alt="selectors" /></li>
	</ul>
</div>

@keyframes AutoSlide {
	0%, 15%, 100% {
		left: 0px; /*1ère image*/
	}
	35%, 50% {
		left: -150px; /*2ème image*/
	}
	70%, 85% {
		left: -300px; /*3ème image*/
	}
}



#slideshow {
    border:5px solid white;
	position: relative;
	width: 750px;
	height: 1072px;
	margin:  20px auto;
	overflow: hidden;
}

#slideshow #sContent li img {
    width: 100%;
    height: 100%;
}

#sContent li {
	display: inline;
}

#sContent {
    border:5px solid yellow;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;            
	padding: 0;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

Modifié par Kaliluja (17 Feb 2017 - 13:52)