<div class="slideshow">
  <img src="https://placehold.it/360x200?text=ONE">
  <img src="https://placehold.it/360x200?text=TWO">
  <img src="https://placehold.it/360x200?text=THREE">
</div>
.slideshow > * { 
  position: absolute;
  display: none; 
}
jQuery(function($) {
  
  var slideInterval = 2000,
    fadeDuration = 600,
    $slideshow = $('.slideshow'),
    $slides = $slideshow.children();
  
  $slides.eq(0).fadeIn(fadeDuration);
  
  setInterval(function() {
    $slides = $slideshow.children();
    $slides.eq(0).fadeOut(fadeDuration, function() {
      $(this).appendTo($slideshow);
    });
    $slides.eq(1).fadeIn(fadeDuration);
  }, slideInterval);
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js