<div class="slideshow">
  <div class="slide active">
    <img src="https://s.cdpn.io/6234/railcars.jpg" alt="" class="horizontal" />
  </div>
  <div class="slide">
    <img src="https://s.cdpn.io/6234/old-man.jpg" alt="" class="vertical" />
  </div>
  <div class="slide">
    <img src="https://s.cdpn.io/6234/girl.jpg" alt="" class="horizontal" />
  </div>
  <div class="slide last">
    <img src="https://s.cdpn.io/6234/dandelion.jpg" alt=""  class="vertical" />
  </div>
  <div class="overlay overlay-shadow"></div>
  <div class="overlay overlay-highlight"></div>
</div>
<div class="slideshow-effects">
  
</div>
<div class="slideshow-nav">
  <a href="#" class="nav-link previous"><em class="icon-chevron-sign-left icon-2x"></em></a>
  <a href="#" class="nav-link next"><em class="icon-chevron-sign-right icon-2x"></em></a>
</div>
@baseBg: #ececec;
@baseTxt: #3f3739;
@hoverColor: #5fd8dd;
body{
  background-color: @baseBg;
  color: @baseTxt;
}
a{
  color: @baseTxt;
  text-decoration: none;
}

.slideshow{
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto 0px auto;
  text-align: center;
}
.slide{
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.overlay{
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
}
.overlay-shadow{
  box-shadow: inset 0px 0px 10px #000;
  opacity: 0.6;
}
.overlay-highlight{
  background: -webkit-radial-gradient(30% 30%, closest-corner, #fff, #2F2727);
  background: -moz-radial-gradient(30% 30%, closest-corner, #fff, #2F2727);
  background: -ms-radial-gradient(30% 30%, closest-corner, #fff, #2F2727);
  opacity: 0.4;
}
.active{
  opacity: 1;
}

.slide img.horizontal{
  max-height: 100%;
  width: auto;
}
.slide img.vertical{
  max-width: 100%;
  height: auto;
}
.slideshow-nav{
  width: 500px;
  margin: -175px auto 0 auto;
  padding: 10px;
  text-align: center;
  overflow: auto;
}
.nav-link{
  transition: color 0.25s linear;
  padding: 0px 5px;
}
.nav-link:hover{
  color: #222;
}
.nav-link em{

}
.previous{
  float: left;
}

.next{
  float: right;
}
View Compiled
$(document).ready(function(){
  var $prev = $('.previous');
  var $next = $('.next');
  var mode = "auto";
  $prev.on({
    click: function(e){
      e.preventDefault();
      mode = "manual";
      showPreviousImage();
    }
  });
  $next.on({
    click: function(e){
      e.preventDefault();
      mode = "manual";
      showNextImage();
      
    }
  });
  
  setInterval(function(){
    if(mode==="auto"){
      showNextImage();
    }
  },3000);
  
  function showNextImage(){
      var $actEl = $('.active');
      var $nextEl = $actEl.next('.slide');
      if($nextEl.length){
        $actEl.removeClass('active');
        $nextEl.addClass('active');
      }else{
        $actEl.removeClass('active');
        $('.slide:first-child').addClass('active');
      }
  }
  
  function showPreviousImage(){
      var $actEl = $('.active');
      var $prevEl = $actEl.prev('.slide');
      if($prevEl.length){
        $actEl.removeClass('active');
        $prevEl.addClass('active');
      }else{
        $actEl.removeClass('active');
        $('.slide.last').addClass('active');
      }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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