如何使触控滑块选项ng-引导旋转木马角？

Question

在我的电子商务网站上，我有我使用过ng-自举旋转木马的产品图片，它工作得很好(除了缓慢的初始负载问题)，但是不支持在移动设备上向右/向左滑动。

我想知道修复它最好的方法是什么，或者是另一个轻量级的包来让它工作呢？

我知道这个问题在过去的几个响应中得到了解决，但是其中大多数都指向了基于Jquery的解决方案，但是我希望在没有混合库的情况下保持解决方案的干净。

谢谢你抽出时间！！

Answer 1

它只是包含在一个div中，其中包含了事件的接触式开始和触屏

<div (touchstart)="posIni = $event.changedTouches[0].pageX"
      (touchend)="move($event.changedTouches[0].pageX)">
    <ngb-carousel #carousel *ngIf="images">
       ....
    </ngb-carousel>
</div>

然后使用prev和下一个旋转木马的方法。

  @ViewChild('carousel') carousel:NgbCarousel
  posIni: any;
  move(pos:number) {
    const offset = this.posIni - pos;
    if (offset < -100) this.carousel.prev()

    if (offset > 100) this.carousel.next();
  }

一个stackblitz

注意:真的做一个旋转木马很容易，看这个所以