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

编程问答 2022-07-28

问题描述

我创建了一个 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 (将#修改为@）

carouselecmascript-6javascriptsliderslider