时间戳

首页 > 解决方案 > Flickity Carousel - 用户交互后自动播放停止

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

问题描述

我有一个包含推荐的 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>

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

标签： javascripthtml

解决方案

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

  • 捕获与滑块交互后调用的“pointerUp”事件。
  • 触发事件时恢复自动播放。

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

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

推荐阅读