Question

我有一个Flickity轮播，其中包含一个推荐。轮播设置为自动播放。

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

这就是我所拥有的：

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

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

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

以下代码演示了此行为：

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

Answer 2

尝试一下：

this.flickity.on(`uiChange`, function() {
        currentFlickity.player.play();
      });

对我有用。

Answer 3

这部分代码应该有帮助

change: () => {
  (flRef as any).current?.flkty.player.play()
}

以及带有 React 钩子的函数式组件内部的完整示例 ? change 事件将在每次幻灯片更改（索引更改）时触发

import React, { useRef } from 'react'
import Flickity from 'react-flickity-component'
import { Link } from '../../i18n'

export default function HomeSlider(props) {
  const { slides} = props 

  const flRef = useRef()

  return (
    <div className="home-slider">
      <Flickity 
        flickityRef={() => {}}
        ref={flRef}
        static
        options={{
          wrapAround: true, 
          freeScroll: false, 
          initialIndex: 1, 
          autoPlay: 6000,
          lazyLoad: true,
          adaptiveHeight: true,
          on: {
            ready: () => {
              console.log('Flickity ready', flRef.current)
            },
            change: () => {
              (flRef as any).current?.flkty.player.play()
            }
          }
        } as any}>
          {
            slides?.length > 0 && slides.map(slide => (
              <div className="slide" key={slide.id}>
                <Link href={slide?.details_button_url || '/'}>
                  <img src={slide.image_url} />
                </Link>
              </div>
            ))
          }
      </Flickity>
    </div>
  )
}

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

3 个答案: