Question

我正在使用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

Answer 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);
};

使旋转木马停在第一张和最后一张幻灯片上（ng-swipe）

1 个答案: