在第一张和最后一张幻灯片上停止轮播（ng-swipe）答案

【问题标题】：Make carousel stop on first and last slide (ng-swipe)在第一张和最后一张幻灯片上停止轮播（ng-swipe）
【发布时间】：2019-11-25 10:49:51
【问题描述】：

我正在使用 AngularJS 应用程序版本 1.5.9，并且正在构建一个轮播。

除了我需要旋转木马在我的ng-swipe-left 和ng-swipe-right 的第一张和最后一张幻灯片上停止这一事实之外，我一切正常。

<div class='ut-position-relative'>
    <div class='mo-karousel'
       ng-swipe-left='ctrl.updateSlidePosition(ctrl.positionMoveToSlide)'
       ng-swipe-right='ctrl.updateSlidePosition(ctrl.positionMoveToSlide)'>
      <atom-carousel-arrow class='ut-position-absolute-c-v-l ut-bring-up-2 ut-hide-u-main'
        is-left='true'
        ng-click='ctrl.updateSlidePosition(ctrl.constantDirectionNext)'>
      </atom-carousel-arrow>
      <div class='st-container st-container--nowrap ut-overflow-hidden-x'
           ng-transclude=''>
      </div>
      <div class='ut-position-absolute-c-h-b ut-bring-neutral ut-fill-width ut-align-text-c'>
          <div class='is-rounded-edges ut-margin-r-xxsm ut-display-inline-block ut-padding-a-xxxsm'
               ng-class="{'mo-color-bg-dark-grey': 1 === slide.position,
                          'mo-color-bg-light-grey': 1 !== slide.position}"
               ng-click='ctrl.positionMoveToSlide($index)'
               ng-repeat='slide in ctrl.slides track by $index'>
          </div>
      </div>
      <atom-carousel-arrow class='ut-position-absolute-c-v-r ut-bring-up-2 ut-hide-u-main' 
          ng-click='ctrl.updateSlidePosition(ctrl.constantDirectionPrev)'>
      </atom-carousel-arrow>
    </div>
</div>

(function () {
  this.positionRotate = function (n) {
    if (self.nextOrPrev === self.constantDirectionNext) {
      n--;
    } else {
      n++;
    }
    if (n > self.slides.length) {
      n = 1;
    } else if (n < 1) {
      n = self.slides.length;
    }
    return n;
  };

  this.updateSlidePosition = function (nextOrPrev) {
    if (self.isSlidesReady) {
      self.nextOrPrev = nextOrPrev;
      _.each(self.slides, function (slide) {
        return slide.position = self.positionRotate(slide.position);
      });
    }
    return this;
  };

}).call(this);

是的，他们都工作，只是没有按预期工作。我在轮播上的点上有一个点击事件，它正在调用ctrl.positionMoveToSlide($index)，并且在我的控制器中我正在做

this.positionMoveToSlide = function(index) {
    var results;
    if (self.isSlidesReady) { 
        results = [];
        while (!(self.slides[index].position < 2)) {
            results.push(_.each(self.slides, function(slide) {
                 return slide.position = self.positionRotate(slide.position);
            })
          );
        }
        return results;
    }
};

因为我可以访问$index，所以效果很好

【问题讨论】：

ng-swipe-left 和 ng-swipe-right 指令有效吗？看起来它们都调用了相同的函数。
是的，他们都工作他们只是没有按预期工作。我在轮播上的点上有一个点击事件，它正在调用ctrl.positionMoveToSlide($index)，在我的控制器中我正在做```这个.positionMoveToSlide = 函数（索引）{ var 结果； if (self.isSlidesReady) { 结果 = []; while (!(self.slides[index].position
一切正常，因为我可以访问 $index

标签： javascript html arrays angularjs

【解决方案1】：

我会以不同的方式旋转幻灯片：

function mapRotate(arr, position) = > (
    arr.map( (_,i) => arr[(position+i) % arr.length] )
);

这将创建一个新数组，该数组从原始数组旋转position 参数的值。这避免了使用while 循环。

不要改变原始幻灯片数组，而是根据所需位置创建一个新数组以供查看。

this.position = 0;
this.slidesToView = mapRotate(this.slides, this.position);

this.slideToN = n => {
    if (n<0 || n>= this.position.length) return;
    this.position = n;
    this.slidesToView = mapRotate(this.slides, this.position);
};

this.slideLeft = () => {
    if (this.position == 0) return;
    this.position--;
    this.slideToN(this.position);
};     

this.slideRight = () => {
    if (this.position == this.slides.length-1) return;
    this.position++;
    this.slideToN(this.position);
};

【讨论】：