Простой слайдер правильно добавляет класс при перевороте

Question

У меня есть слайдер, который почти работает достаточно хорошо. Левая и правая кнопки работают, но я хочу, чтобы класс .current-slide был видимым. Это достигается с помощью функции SlideChanged и работает при использовании следующей кнопки, но, к сожалению, при использовании кнопки prev это неточно?

Basi c пример: https://codepen.io/rKaiser/pen/KKdZxqv

Как я ни старался, я не мог этого понять, это как-то связано с перевернутыми индексами, которые я не мог правильно привязать при нажатии кнопки prev, я думаю.

<div class="nav-example">
  <div id="myslider" class="nav-slider">
    <img class="current-slide" src="http://placekitten.com/g/612/612"/>
    <img src="https://picsum.photos/612/612"/>
    <img src="https://picsum.photos/612/612?random=1"/>
    <img src="https://picsum.photos/612/612?random=2"/>
    <img src="https://picsum.photos/612/612?random=3"/>
  </div>
  <a id="prev-button" href="#" class="slide-button">&lt;</a>
  <a id="next-button" href="#" class="slide-button">&gt;</a>
</div>

var container = document.getElementById('myslider');
var children = container.children;

function onSlideChanged(prev, next) {
  children[prev].className = '';
  children[next].className = 'current-slide';
}

var isNext = true;
var imgSlider = simpleslider.getSlider({
  container: container,
  children: children,
  prop: 'left',
  init: -612,
  show: 0,
  end: 612,
  unit: 'px',
  paused: true,
  onChange: onSlideChanged

});

document.getElementById('prev-button').onclick = function(e) {
  if (isNext) {
    imgSlider.reverse();
    isNext = false;
  }
  imgSlider.next();
  e.preventDefault();
};

document.getElementById('next-button').onclick = function(e) {
  if (!isNext) {
    imgSlider.reverse();
    isNext = true;
  }
  imgSlider.next();
  e.preventDefault();
};

.nav-example { position: relative; width: 612px; height: 612px; }
.nav-slider { position: absolute; top: 0px; left: 0px; z-index: 1;}
#myslider { width:612px; height:612px; }
a.slide-button { position: absolute; padding: 300px 0px 0px 15px; top: 0px; left: 0px; z-index: 12; width: 30px; height: 612px; color: #FFF; background-color: rgba(0,0,0,0.4); text-decoration: none; font-weight: 600; box-sizing: border-box; }
#next-button { left: auto; right: 0px; }
/*     ------------------------- */         
.current-slide {
  filter: invert(1);
  border-radius: 50%;
}

Answer 1

Он должен работать вот так, кажется немного грубым, но, по крайней мере, работает.

   function onSlideChanged(prev, next) {
      if (isNext) {
        children[prev].className = '';
        children[next].className = 'current-slide';
      } else {
        var currentSlide = $('#myslider img.current-slide');
        if ( currentSlide.is(':first-child') ) {
          console.log('first');
          $('#myslider img').removeClass('current-slide');
          $('#myslider img').last().addClass('current-slide');
        } else {
          console.log('not first');
          currentSlide.prev().addClass('current-slide').next().removeClass('current-slide');
        }
      }
    }