<div class="slider">
  <div class="slide">
    <p>Slider 1</p>
  </div>
  <div class="slide">
    <p>Slider 2</p>
  </div>
  <div class="slide">
    <p>Slider 3</p>
  </div>
  <div class="slide">
    <p>Slider 4</p>
  </div>
  <div class="slide">
    <p>Slider 5</p>
  </div>
</div>
@keyframes slideShow
  0%
    width: 100%
    left: 100%
  5%
    left: 0
  25%
    left: 0
  30%
    width: 100%
    left: -100%
  30.001%
    width: 0
    left: -100%
  100%
    width: 0
    left: 100%
  
.slider
  width: 100%
  height: 100vh
  position: relative
  overflow: hidden
  
.slide
  position: absolute
  width: 100%
  height: inherit
  overflow: hidden
  animation: slideShow 14s infinite
  background-position: center
  background-size: cover
  background-color: #000
  color: #fff
  font-size: 36px
  display: flex
  justify-content: center
  align-items: center
  
.slide:nth-child(1)
  left: 0
  animation-delay: 11s
  background-image: url(http://wallpapers-image.ru/1920x1200/mountains/wallpapers/wallpapers-mountains-14.jpg)
  
.slide:nth-child(2)
  left: 0
  animation-delay: 8s
  background-image: url(http://wallpapers-image.ru/1920x1200/mountains/wallpapers/wallpapers-mountains-4.jpg)
  
.slide:nth-child(3)
  left: 0
  animation-delay: 5s
  background-image: url(http://www.1zoom.me/big2/1/230640-frederika.jpg)
  
.slide:nth-child(4)
  left: 0
  animation-delay: 2s
  background-image: url(http://hq-oboi.ru/photo/velichestvennye_gory_1920x1200.jpg)
  
.slide:nth-child(5)
  left: 0
  animation-delay: -1s
  background-image: url(http://hq-oboi.ru/photo/krutye_gory_1920x1200.jpg)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.