Angular 如何将无限滚动添加到这个角度旋转木马？

接下来，我将演示如何使用Angular中的两个指令和一个组件制作一个简单的旋转木马

该功能集非常有限，不包括我想添加的“无限滚动”模式

“inifinite scroll”——我指的是类似于jQuery的东西：

var carousel=$‘carousel’， 阈值=150， 滑动宽度=500， dragStart， 德拉根德； $“下一步”。单击函数{ 移位滑块-1 } $'prev'。单击函数{ 换档滑杆1 } 旋转木马。在“mousedown”上，函数{ if carousel.hasClass“transition”返回； dragStart=event.pageX； $this.on'mousemove'，函数{ dragEnd=event.pageX； $this.css'transform'、'translateX'+dragPos+'px' } $document.on'mouseup'，函数{ 如果dragPos>阈值{ 返回档位滑动1 } 如果dragPos<-阈值{ 返回换档滑杆-1 } shiftSlide0； } }; 函数dragPos{ 返回dragEnd-dragStart； } 功能移位滑动方向{ if carousel.hasClass“transition”返回； dragEnd=dragStart； $document.off'mouseup' 旋转木马“鼠标移动” .addClass“过渡” .css'transform'、'translateX'+方向*滑动宽度+'px'； setTimeoutfunction{ 如果方向===1{ $'.slide:first'。在$'之前。slide:last'； }否则，如果方向==-1{ $'.slide:last'。在$'之后。slide:first'； } carousel.removeClass“transition” css'transform'、'translateX0px'； }, 700 } $carousel宽度：600px； $carousel高度：300px； 身体{ 背景：333人； 颜色：fff； 字号：22号； 文本对齐：居中； 字体系列：“Teko”； 字母间距：0.15em； } 正文*{ -webkit用户选择：无 } .包裹{ 位置：相对位置； 宽度：$转盘宽度； 高度：300px； 保证金：0自动； 盒影：7px7px5px0pxrgba0,0,0,0.25； } .窗户{ 溢出：隐藏； 位置：相对位置； 背景：222人； } 旋转木马{ 宽度：10000px； 位置：相对位置； 排名：0； 左：-450px； } .幻灯片{ 高度：300px； 宽度：500px； 光标：指针； 浮动：左； 显示器：flex； 弯曲方向：立柱； 证明内容：中心； } .slideb1{ 背景：556270 } .slideb2{ 背景：4ECDC4 } .slideb3{ 背景：9CE462 } .slideb4{ 背景：FF6B6B } .slideb5{ 背景：C44D33 } 前， 下一个{ 光标：指针； 位置：绝对位置； 底部：-40px； 字号：14pt； } 上{ 左：0 } 下一个{ 右：0 } .过渡{ 过渡：.7s； } 无限旋转木马 幻灯片-1 幻灯片2 幻灯片-3 幻灯片-4 幻灯片-5 上 下一个 更新 在我重新排序queryList之前，当我们在最后一个滑块和第二个滑块中时

有一个工作要做。关键是对查询列表进行重新排序，并在生成下一个之前的最后一个或生成上一个之前的第一个幻灯片中更改当前幻灯片

首先更改函数transitionCarrousel，以允许在0秒内制作动画

  private buildAnimation(offset, time: any) {
    return this.builder.build([
      animate(time == null ? this.timing : 0, 
          style({ transform: `translateX(-${offset}px)` }))
    ]);
  }

函数next和prev变得类似

next() {
    //if we are in the last 
    if (this.currentSlide + 1 == this.items.length) {
      //reorder the QueryList, 
      let arr = this.items.toArray();
      let first = arr.shift();  //remove the first element
      arr = arr.concat([first]);  //Concat at last of the array
      this.items.reset(arr);
      this.currentSlide--;  //less currentSlide
      this.transitionCarousel(0); //execute the animation in 0 seconds
    }
    this.currentSlide = (this.currentSlide + 1) % this.items.length;
    this.transitionCarousel(null);
  }

  prev() {
    //If we are in the first one
    if (this.currentSlide  == 0) {
      let arr = this.items.toArray();
      let last = arr.pop();  //remove the last element
      arr = [last].concat(arr); //create an array with the last element+arr
      this.items.reset(arr);
      this.currentSlide++;  //change the currentSlide
      this.transitionCarousel(0);  //execute the animation in 0 seconds
    }
    this.currentSlide =
      (this.currentSlide - 1 + this.items.length) % this.items.length;
    this.transitionCarousel(null);
  }

---

你可以在

中看到工作似乎适合我。。。你有什么问题要报告吗？旋转木马工作，这不是我的问题-我想知道如何添加无限滚动，但你有无限滚动！这就是为什么我问你是否有问题，因为SOF代表问题。如果你想找到制作无限卷轴的最佳代码，我不确定这是问这个问题的地方。也许试试？哦，我明白问题所在了。你不喜欢你的旋转木马回到第一张幻灯片，你想把它当作第四张幻灯片吗？不，我没有无限的滚动——我有一些东西，当你经过最大或最小幻灯片之前，水平向后滚动和重置。这基本上是一个bug，我正在寻求帮助来修复。这很聪明。谢谢你的帮助，接受了你的回答！