<!--I spent basically a whole day during the finals portion of my Intro To Web class trying to find a good solution to this problem. I didn't find anything super useful online, so I ended up coding this myself. It's basically a simple slideshow with fading transitions. Right now it accomodates 5 photos, but it wouldn't be terribly hard to have it work with more or less than that. Also, it uses no JS- take that as you will. 

TL;DR: Simple, responsive, automaic, looping slideshow with fading transitions-->

<body>
<div class="slider">
        		<img src="http://via.placeholder.com/250x250/DAF7A6" class="image5">
        		<img src="http://via.placeholder.com/250x250/FFC300" class="image4">
        		<img src="http://via.placeholder.com/250x250/FF5733" class="image3">
        		<img src="http://via.placeholder.com/250x250/C70039" class="image2">
        		<img src="http://via.placeholder.com/250x250/581845" class="image1">
        		<div class="null"></div>
    			</div>
</body> 
.slider{
  position: relative;
  top: 10px;
  left: 10px;
}

.slider img{
  position: absolute;
  top:0px;
  left:0px;
  width: 50%;
  margin: 10px;
  
}

.image1{
	animation-name: image1;
	animation-duration: 35s;
	animation-iteration-count: infinite;
}

.image2{
	animation-name: image2;
	animation-duration: 35s;
	animation-iteration-count: infinite;
}

.image3{
	animation-name: image3;
	animation-duration: 35s;
	animation-iteration-count: infinite;
}

.image4{
	animation-name: image4;
	animation-duration: 35s;
	animation-iteration-count: infinite;
}

.image5{
	animation-name: image5;
	animation-duration: 35s;
	animation-iteration-count: infinite;
}

@keyframes image1{
	0%{
    opacity: 1;
  }
  14%{
    opacity: 1;
  }
  20%{
  	opacity: 0;
  }
  94%{
  	opacity: 0;
  }

}

@keyframes image2{
	14%{
    opacity: 1;
  }
  34%{
  	opacity: 1;
  }
  40%{
  	opacity: 0;
  }

  99%{
  	opacity: 0;
  }

}

@keyframes image3 {
	34%{
    opacity: 1;
  }
  54%{
  	opacity: 1;
  }
  60%{
  	opacity: 0;
  }

  99%{
  	opacity: 0;
  }

}

@keyframes image4 {
	54%{
    opacity: 1;
  }
  74%{
  	opacity: 1;
  }
  80%{
  	opacity: 0;
  }

  99%{
  	opacity: 0;
  }

}

@keyframes image5 {
	74%{
    opacity: 1;
  }
  94%{
  	opacity: 1;
  }
  100%{
  	opacity: 0;
  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.