SIMPLE YET EFFICIENT SLIDESHOW

/*Downloaded from https://www.codeseek.co/chriskirsch/simple-yet-efficient-slideshow-GrRqOG */
body {
  background: #222;
  margin:0;
  padding:0;
  font-family: 'Oswald', sans-serif;
}
.title {
  width:300px;
  margin:0 auto;
  text-align:center;
  color:#FFF;
  transform:skew(-6deg);
  text-transform:uppercase;
  line-height:1.6em
}
.red {
  color:crimson
}
.slider {
  transition:all .3s ease;
  left:0px;
  position:absolute;
  width:1500px;
}

.image {
  width:300px;
  height:300px;
  overflow:hidden;
  float:left;
}

.image img{ 
  max-height: 100%;
  min-width:100%;
  display:block;
}

.content {
  width:300px;
  height:300px;
  position:relative;
  overflow:hidden;
  margin:20px auto;
}

.content::after {
  content :"";
  position:absolute;
  z-index:888;
  border:2px solid #FFF;
  top:10px;
  left:10px;
  bottom:10px;right:10px;
  opacity:0.4;
}

#previous,#next {
  font-size:58px;
  color:white;
  font-weight:bold;
/*   font-family:sans-serif; */
  text-decoration:none;
  position:absolute;
  opacity:.5;
  z-index:999;
  transition:all .2s ease;
}
#previous:hover {
  left:12px;
  opacity:.8;
}

#previous {
  left: 20px;
  top:50%;
  transform: translateY(-50%);
}

#next {
  right:20px;
  top:50%;
  transform: translateY(-50%);
}

#next:hover {
  right:12px;
  opacity:.8;
}

/*Downloaded from https://www.codeseek.co/chriskirsch/simple-yet-efficient-slideshow-GrRqOG */
function next() {
  var sliderPos = $('.slider').position().left;
  var galWidth = $('.slider').width();

  if (-(sliderPos) <= galWidth-600) {
    $('.slider').css('left', (sliderPos -300) + 'px');
  } else {
     $('.slider').css('left', (sliderPos - sliderPos) + 'px');
  }
}

function previous() {
  var sliderPos = $('.slider').position().left;
  if (sliderPos < 0) {
    $('.slider').css('left', (sliderPos +300) + 'px');
  } else {
    $('.slider').css('left', (sliderPos - sliderPos) + 'px');
  }   
}

$('#next').on('click', function() {
  if ($(this).hasClass('nextOn')) {
    $(this).removeClass('nextOn');
    next();
  }
  
  clearTimeout(classBack);
  
  var classBack = setTimeout(function() {
    $('#next').addClass('nextOn');
  }, 300)
})

$('#previous').on('click', function() {
  if ($(this).hasClass('previousOn')) {
    $(this).removeClass('previousOn');
    previous();
  }
  
  clearTimeout(classBack);
  
  var classBack = setTimeout(function() {
    $('#previous').addClass('previousOn');
  }, 300)
})