为什么左属性在 javascript 中不能正常工作？

Question

我打算用相同的逻辑制作下面的轮播示例。但是我在设置左侧属性时遇到了一个问题。 演示 https://3dedy.csb.app/

1. 以上示例是无限循环示例。当用户导航到最后一张幻灯片时，它会显示第一张幻灯片
2. 我从示例中了解到的内容。当用户在最后一张幻灯片上时 .it set first Item the left property 并在用户单击下一个按钮时显示第一张幻灯片

我使用了相同的逻辑。

当用户在最后一张幻灯片上时，我还设置了 left 属性。但在我的情况下，我无法显示第一张幻灯片

可能是我做错了什么 这是我的代码

 nextSlide() {
        const t       = this;
        const opts    = t.options;
        let nextSlide = t.activeSlide + 1;

        if ((t.activeSlide >= t.slidesLength) && !t.isEnabledOption('loop')) {
            t._paused = true;

            return;
        }

        if (nextSlide > t.slidesLength) {
            //
            console.log(t);
            t._slides[0].style.left = `${100*t._slides.length}%`
           // nextSlide = 1;
        }

整个代码 https://plnkr.co/edit/PWJl4cELopwUaOL2?open=lib%2Fscript.js&preview

Answer 1

轮播的逻辑非常简单：

C = (is_next ? ++C : --C) < 0 ? T-1 : C%T;

其中 C 是当前索引，T 是幻灯片的总长度。

基本动画和prev/next方法：

  anim() {
    this.index = this.index < 0 ? this.total - 1 : this.index >= this.total ? 0 : this.index;
    this.EL.style.transform = `translateX(-${100 * this.index}%)`;
  }

  prev() {
    this.index -= 1;
    this.anim();
  }

  next() {
    this.index += 1;
    this.anim();
  }

更多信息请访问this SO answer (Add Prev Next Controls to Carousel)