<!-- 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%;
}
}
View Compiled
$(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');
}
});
This Pen doesn't use any external CSS resources.