微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

es6 轮播中的无限循环滑块?

如何解决es6 轮播中的无限循环滑块?

我创建了一个 Es6 轮播。

我想在无限循环中显示幻灯片。我遵循以下方法。或者想使用下面的方法来实现无限轮播Infinity Loop Slider Concepts 我没有使用 jquery。我正在使用 vanilla js。

在我的演示应用程序中。我无法克隆元素以在同一方向显示元素。现在,当用户移动到最后一个元素时。我的轮播移动到反向并显示第一张幻灯片

如何防止用户在上一张幻灯片中按下下一个按钮时反向移动。

这是我的代码 https://plnkr.co/edit/Ugk31iBnBj0R3e6c?open=lib%2Fscript.js&preview

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) {
      nextSlide = 1;
    }

    if (isFunction(opts.beforeChange)) {
      opts.beforeChange.call(t,t,t.activeSlide,nextSlide,t.slidesLength);
    }

    t.activeSlide >= t.slidesLength && t.isEnabledOption("loop")
      ? (t.activeSlide = 1)
      : (t.activeSlide += 1);
    t._setActiveSlide();
  }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。