为什么 属性 在 javascript 中无法正常工作？

Question

我打算用相同的方式制作下面的旋转木马示例 logic.But 我在设置左侧时遇到一个问题 属性。 演示 https://3dedy.csb.app/

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

我用了同样的逻辑。

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

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

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

可以在

上找到更多信息