Question

我跟随this fantastic article，它演示了如何在Angular中使用两个指令和一个组件来制作一个简单的轮播。

功能集非常有限，并且不包含我要添加的“ 无限滚动”模式。

通过“ 无限滚动”-我的意思是类似jQuery的内容：

var carousel = $('#carousel'),
  threshold = 150,
  slideWidth = 500,
  dragStart,
  dragEnd;

$('#next').click(function() {
  shiftSlide(-1)
})
$('#prev').click(function() {
  shiftSlide(1)
})

carousel.on('mousedown', function() {
  if (carousel.hasClass('transition')) return;
  dragStart = event.pageX;
  $(this).on('mousemove', function() {
    dragEnd = event.pageX;
    $(this).css('transform', 'translateX(' + dragPos() + 'px)')
  })
  $(document).on('mouseup', function() {
    if (dragPos() > threshold) {
      return shiftSlide(1)
    }
    if (dragPos() < -threshold) {
      return shiftSlide(-1)
    }
    shiftSlide(0);
  })
});

function dragPos() {
  return dragEnd - dragStart;
}

function shiftSlide(direction) {
  if (carousel.hasClass('transition')) return;
  dragEnd = dragStart;
  $(document).off('mouseup')
  carousel.off('mousemove')
    .addClass('transition')
    .css('transform', 'translateX(' + (direction * slideWidth) + 'px)');
  setTimeout(function() {
    if (direction === 1) {
      $('.slide:first').before($('.slide:last'));
    } else if (direction === -1) {
      $('.slide:last').after($('.slide:first'));
    }
    carousel.removeClass('transition')
    carousel.css('transform', 'translateX(0px)');
  }, 700)
}

$carousel-width: 600px;
$carousel-height: 300px;
body {
  background: #333;
  color: #fff;
  font-size: 22pt;
  text-align: center;
  font-family: 'Teko';
  letter-spacing: 0.15em;
}

body * {
  -webkit-user-select: none
}

.wrap {
  position: relative;
  width: $carousel-width;
  height: 300px;
  margin: 0 auto;
  box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.25);
}

.window {
  overflow: hidden;
  position: relative;
  background: #222;
}

#carousel {
  width: 10000px;
  position: relative;
  top: 0;
  left: -450px;
}

.slide {
  height: 300px;
  width: 500px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide#b1 {
  background: #556270
}

.slide#b2 {
  background: #4ECDC4
}

.slide#b3 {
  background: #9CE462
}

.slide#b4 {
  background: #FF6B6B
}

.slide#b5 {
  background: #C44D33
}

#prev,
#next {
  cursor: pointer;
  position: absolute;
  bottom: -40px;
  font-size: 14pt;
}

#prev {
  left: 0
}

#next {
  right: 0
}

.transition {
  transition: .7s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>INFINITE CAROUSEL</h1>
<div class="wrap">
  <div class="window">
    <div id="carousel">
      <span class="slide" id="b1">SLIDE-1</span>
      <span class="slide" id="b2">SLIDE-2</span>
      <span class="slide" id="b3">SLIDE-3</span>
      <span class="slide" id="b4">SLIDE-4</span>
      <span class="slide" id="b5">SLIDE-5</span>
    </div>
  </div>
  <span id="prev">PREV</span>
  <span id="next">NEXT</span>
</div>

（轮播可以在各个方向上无限滚动，同时保持幻灯片的正确顺序）

我尝试了多种添加此功能的方法，但都没有成功，这是我尝试过（后来被删除）的：

动态地在当前查看的子集的任一侧添加和删除大块幻灯片-即，如果轮播中包含3张幻灯片，我将在原始`1-2-3 1-2-3的任一侧复制它们，并且然后在用户滚动时添加/删除块。这几乎行得通，唯一的问题是，Angular在删除块并像疯了一样旋转旋转木马时感到困惑，因为它仍然引用了已不存在的幻灯片编号。
动态添加和删除单个幻灯片，类似于上述方法。同样的问题。
直接向上复制幻灯片几百次。这行得通，但显然表现不佳，而且似乎很愚蠢。

这里是stackblitz showing what I've got so far。

Answer 1

已更新 （在我们排在最后一个但又在第二个滑块中时，在对queryList重新排序之前）

有一个解决方法。关键是对QueryList进行重新排序，并在最后一个（在制作下一个之前）或第一个（在制作上一个之前）时更改currentSlide

首先将功能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);
  }

您可以在stackblitz

中查看工作

如何向此Angular轮播添加无限滚动？

1 个答案: