[class*="slider-"] {
position:relative;
width:100%;
height:100%
}
[class*="slider-"]>li {
position:absolute;
height:100%;
top:0;
left:0;
bottom:0;
right:0
}

.slider-2>li:nth-child(1) {
  background: url(https://unsplash.it/1920/1200?image=700) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-2-1 15s linear infinite;
  animation: slider-2-1 15s linear infinite
}

.slider-2>li:nth-child(2) {
  background: url(https://unsplash.it/1920/1200?image=696) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-2-2 15s linear infinite;
  animation: slider-2-2 15s linear infinite
}
@-webkit-keyframes 
slider-2-1 { 0% {
opacity:1
}
45% {
opacity:1
}
50% {
opacity:0
}
95% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes 
slider-2-2 { 0% {
opacity:0
}
45% {
opacity:0
}
50% {
opacity:1
}
95% {
opacity:1
}
100% {
opacity:0
}
}

.slider-3>li:nth-child(1) {
  background: url(https://unsplash.it/1920/1200?image=700) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-3-1 20s linear infinite;
  animation: slider-3-1 20s linear infinite
}

.slider-3>li:nth-child(2) {
  background: url(https://unsplash.it/1920/1200?image=696) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-3-2 20s linear infinite;
  animation: slider-3-2 20s linear infinite
}

.slider-3>li:nth-child(3) {
  background: url(https://unsplash.it/1920/1200?image=689) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-3-3 20s linear infinite;
  animation: slider-3-3 20s linear infinite
}
@-webkit-keyframes 
slider-3-1 { 0% {
opacity:1
}
25% {
opacity:1
}
30% {
opacity:0
}
95% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes 
slider-3-2 { 0% {
opacity:0
}
25% {
opacity:0
}
30% {
opacity:1
}
65% {
opacity:1
}
70% {
opacity:0
}
100% {
opacity:0
}
}
@-webkit-keyframes 
slider-3-3 { 0% {
opacity:0
}
25% {
opacity:0
}
65% {
opacity:0
}
70% {
opacity:1
}
95% {
opacity:1
}
100% {
opacity:0
}
}

.slider-4>li:nth-child(1) {
  background: url(https://unsplash.it/1920/1200?image=700) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-4-1 30s linear infinite;
  animation: slider-4-1 30s linear infinite
}

.slider-4>li:nth-child(2) {
  background: url(https://unsplash.it/1920/1200?image=696) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-4-2 30s linear infinite;
  animation: slider-4-2 30s linear infinite
}

.slider-4>li:nth-child(3) {
  background: url(https://unsplash.it/1920/1200?image=689) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-4-3 30s linear infinite;
  animation: slider-4-3 30s linear infinite
}

.slider-4>li:nth-child(4) {
  background: url(https://unsplash.it/1920/1200?image=681) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-4-4 30s linear infinite;
  animation: slider-4-4 30s linear infinite
}
@-webkit-keyframes 
slider-4-1 { 0% {
opacity:1
}
20% {
opacity:1
}
25% {
opacity:0
}
95% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes 
slider-4-2 { 0% {
opacity:0
}
20% {
opacity:0
}
25% {
opacity:1
}
45% {
opacity:1
}
50% {
opacity:0
}
100% {
opacity:0
}
}
@-webkit-keyframes 
slider-4-3 { 0% {
opacity:0
}
45% {
opacity:0
}
50% {
opacity:1
}
70% {
opacity:1
}
75% {
opacity:0
}
100% {
opacity:0
}
}
@-webkit-keyframes 
slider-4-4 { 0% {
opacity:0
}
70% {
opacity:0
}
75% {
opacity:1
}
95% {
opacity:1
}
100% {
opacity:0
}
}

.small-slider-wrapper,
.medium-slider-wrapper,
.large-slider-wrapper { width: 100% }

.small-slider-wrapper {
  max-width: 400px;
  height: 300px
}

.medium-slider-wrapper {
  max-width: 600px;
  height: 400px
}

.large-slider-wrapper {
  max-width: 800px;
  height: 500px
}