简单滑块在反转时正确添加 class

Question

我有一个几乎可以正常工作的滑块。左右按钮可以使用，但我希望它在可见处有一个 .current-slide class。这是在 onSlideChanged 函数中实现的，并且在使用 next 按钮时有效，但不幸的是，在使用 prev 按钮时它不准确？

基本示例： https://codepen.io/rKaiser/pen/KKdZxqv

尽我所能，我无法理解，我认为这与我在单击上一个按钮时无法正确绑定的反向索引有关。

<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');
        }
      }
    }

简单滑块在反转时正确添加 class

Simple-slider add class correctly when reversed

javascript

jquery

slider