javascript - Flickity Carousel - 用户交互后自动播放停止

Question

我有一个包含推荐的 Flickity Carousel。轮播设置为自动播放。

问题是如果用户单击点或下一个/上一个按钮，自动播放就会停止。

这就是我所拥有的:

JS

var flkty = new Flickity( '.main-gallery', {
  cellAlign: 'left',
  contain: true,
  wrapAround: true,
  prevNextButtons: true,
  autoPlay: 5000
});

HTML

  <div class="main-gallery">
  <div class="gallery-cell">
    <div class="testimonial">
      <p class="testimonial-quote" style="font-style: italic;">"Comment."</p>
      <span class="testimonial-author">Author</span>
    </div>
  </div>
  <div class="gallery-cell">
     <div class="testimonial">
      <p class="testimonial-quote">"Comment."</p>
      <span class="testimonial-author">Author</span>
    </div>
  </div>
  <div class="gallery-cell">
        <div class="testimonial">
      <p class="testimonial-quote">"Comment."</p>
      <span class="testimonial-author">Author</span>
    </div>
  </div>
</div>

请协助我让自动播放继续，并且在用户与点或下一个/上一个按钮交互后不要停止。

Answer 1

我通过以下方式解决了这个问题:

捕获与 slider 交互后调用的“pointerUp”事件。

触发事件时恢复自动播放。

以下代码演示了这种行为:

currentFlickity.on('pointerUp', function (event, pointer) {
        currentFlickity.player.play();
    });