<!-- JJ -->
<div class="container">
  <div class="slideshow">
    <div class="slideshow__slides">
      <div class="slideshow__slide slideshow__slide--is-active">
        <img src="https://s.cdpn.io/6234/railcars.jpg" alt="" class="horizontal" />
      </div>
      <div class="slideshow__slide">
        <img src="https://s.cdpn.io/6234/old-man.jpg" alt="" class="vertical" />
      </div>
      <div class="slideshow__slide">
        <img src="https://s.cdpn.io/6234/girl.jpg" alt="" class="horizontal" />
      </div>
      <div class="slideshow__slide slideshow__slide--is-last">
        <img src="https://s.cdpn.io/6234/dandelion.jpg" alt=""  class="vertical" />
      </div>
      <div class="slideshow_overlay slideshow_overlay--is-shadow"></div>
      <div class="slideshow_overlay slideshow_overlay--is-highlight"></div>
    </div>
    <div class="slideshow__effects">

    </div>
    <div class="slideshow__nav">
      <a href="#" class="slideshow__nav_link slideshow__nav_link--is-previous"><i class="ion-chevron-left"></i></a>
      <a href="#" class="slideshow__nav_link slideshow__nav_link--is-next"><i class="ion-chevron-right"></i></a>
    </div>
  </div>
</div>
<!-- SDG -->

$body--BackgroundColor: #ececec;
$slideshow__slide--Border: 6px solid #5E5E5E;
$slideshow__nav_link--Color: #5E5E5E;
$slideshow__nav_link--hover--Color: darken(#5E5E5E, 15%);
body{
  background-color: $body--BackgroundColor;
}
a{
  text-decoration: none;
}
.container {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  height: 100vh;
  margin-top: -150px;
}
.slideshow__slides{
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0px auto;
  text-align: center;
}
.slideshow__slide {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  //border: 4px solid #fff;
  border: $slideshow__slide--Border;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.slideshow__overlay {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
}
.slideshow__overlay--is--shadow {
  box-shadow: inset 0px 0px 10px #000;
  opacity: 0.6;
}
.slideshow__overlay--is-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;
}
.slideshow__slide--is-active{
  opacity: 1;
}

.slideshow__slide img.horizontal{
  max-height: 100%;
  width: auto;
}
.slideshow__slide img.vertical{
  max-width: 100%;
  height: auto;
}
.slideshow__nav{
  width: 500px;
  margin: -175px auto 0 auto;
  padding: 10px;
  text-align: center;
  overflow: auto;
}
.slideshow__nav_link {
  padding: 0px 5px;
  color: $slideshow__nav_link--Color;
  font-size: 1.5rem;
  transition: color 0.25s linear;
}
.slideshow__nav_link:hover{
  color: $slideshow__nav_link--hover--Color;
}
.slideshow__nav_link--is-previous{
  float: left;
}
.slideshow__nav_link--is-next{
  float: right;
}

$(document).ready(function(){
  var $prev = $('.slideshow__nav_link--is-previous');
  var $next = $('.slideshow__nav_link--is-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 = $('.slideshow__slide--is-active');
      var $nextEl = $actEl.next('.slideshow__slide');
      if($nextEl.length){
        $actEl.removeClass('slideshow__slide--is-active');
        $nextEl.addClass('slideshow__slide--is-active');
      }else{
        $actEl.removeClass('slideshow__slide--is-active');
        $('.slideshow__slide:first-child').addClass('slideshow__slide--is-active');
      }
  }
  
  function showPreviousImage(){
      var $actEl = $('.slideshow__slide--is-active');
      var $prevEl = $actEl.prev('.slideshow__slide');
      if($prevEl.length){
        $actEl.removeClass('slideshow__slide--is-active');
        $prevEl.addClass('slideshow__slide--is-active');
      }else{
        $actEl.removeClass('slideshow__slide--is-active');
        $('slideshow__slide--is-last').addClass('slideshow__slide--is-active');
      }
  }
});