horizontal slide show full page

basic layout to feed with content. 4 page.

HTML

<div id="slideshowWrapper">
    <div id="slideshowContent">
        <div id="slideshowImage_01" class="slideshowImage_container active"><p><img src="http://lorempixel.com/640/480/food/1/Container #1 "/>Container #1</p>
              </div><div id="slideshowImage_02" class="slideshowImage_container"><p><img src="http://lorempixel.com/640/480/food/1/Container #2 " />Container #2</p>
              </div><div id="slideshowImage_03" class="slideshowImage_container"><p><img src="http://lorempixel.com/640/480/food/1/Container #3 " />Container #3</p>
        </div><div id="slideshowImage_04" class="slideshowImage_container"><p><img src="http://lorempixel.com/640/480/food/1/Container #4 " />Container #4</p>
        </div>
    </div>
</div>
<!-- End of id="slideshowContent" -->

CSS

body, html {
    height:100%;
    padding:0;
    margin:0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%; 
    height:100%;
    animation: slidemeAnyDir 4s infinite;
    animation-play-state:running;
}
#slideshowWrapper:hover {
    animation-play-state:paused;
}
#slideshowContent {
	height:100%;
    width:100%;
    text-indent:0;
    display:inline-block;
    white-space:nowrap;
}
.slideshowImage_container {
	height:100%;
    width:100%;
    display:inline-block;
    white-space:normal;
    text-indent:normal;
    text-align:center;
}
#slideshowImage_01 {
    background-color: #A0D0A8;
}
#slideshowImage_02 {
    background-color: #009FE3;
}
#slideshowImage_03 {
    background-color: #FCC99A;
}
#slideshowImage_04 {
    background-color: #D8B0CB;
}
img {display:block;margin:auto;}
@keyframes slidemeAnyDir {
      0%, 15%, 100%      {text-indent:0;}
    17%, 32%,  84%, 98% {text-indent:-100%;}
    34%, 49%,  68%, 82% {text-indent:-200%;}
    51%, 66%%           {text-indent:-300%;}
}