<!-- I used varying sizes of images to show that the images would be contained but not stretched to the full width of the slideshow window. -->

<div class="slideshow">
    <div class="inner">
      <div class="img-block on">
        <div class="img-wrap">
          <div>
             <img src="https://placeimg.com/1600/900/animals"/>
          </div>
        </div>
      </div>
      <div class="img-block">
        <div class="img-wrap">
          <div>
             <img src="https://placeimg.com/800/900/tech"/>
          </div>
        </div>
      </div>
      <div class="img-block">
        <div class="img-wrap">
          <div>
             <img src="https://placeimg.com/500/420/nature"/>
          </div>
        </div>
      </div>
      <div class="img-block">
        <div class="img-wrap">
          <div>
             <img src="https://placeimg.com/700/800/poeple"/>
          </div>
        </div>
      </div>
      <div class="img-block">
        <div class="img-wrap">
          <div>
             <img src="https://placeimg.com/460/600/nature"/>
          </div>
        </div>
      </div>
    </div>
</div>

*,*:after,*:before { 
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html { background: #555;}
.slideshow { 
  margin: 0 auto;
  /* max-width: 900px; */
}

.inner {
	display: block;
	margin: 0 auto;
	position: relative;
	padding: 0 0 56% 0;
	text-align: center;
	width: 100%;

	.img-block {
		bottom: 0;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 0;
		-moz-transition: opacity 2s;
		-webkit-transition: opacity 2s;
		transition: opacity 2s;
		&.on { opacity: 1; }
	}

	.img-wrap {
    background: #111;
		height: 0;
    font-size:.001px;
		padding: 0 0 56.25% 0;
		position: relative;
		width: 100%;

		div {
			bottom: 0;
      font-size:0px;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			white-space: nowrap;
			&:before {
				content: "";
				display: inline-block;
				height: 100%;
        margin-left:0px;
        vertical-align: middle;
        width: 0;
			}
		}
	}

	img {
		display:inline-block;
    vertical-align:middle;
		max-width: 100%;
		max-height: 100%;
	}
}

$(document).ready(function(){

	var interval = setInterval(function(){
		cycle();
	},5000);

	var ss = $('.slideshow');
	var first_img = ss.find('.img-block').first();
	var last_img = ss.find('.img-block').last();

	function cycle() {
		var next_img = ss.find('.on').removeClass('on').next();
		if(next_img.length==0) {next_img = first_img;}
		next_img.addClass('on');
	}

});