Question

我正在研究React Awesome Slider。 https://github.com/rcaferati/react-awesome-slider

我已经成功实现了，但是我不知道如何使它每10秒左右自动播放一次。我假设我需要使用动画挂钩？它也有无限的支持，但是当我添加它时什么也没发生。

const onAnimationStart = ({
  element,
  currentIndex,
  nextIndex,
  currentScreen,
  nextScreen,
}) => {
  /*
    ... do Something
  */
}

/* ... */

const slider = (
  <AwesomeSlider
    cssModule={styles}
    onFirstMount={onFirstMount}
    onAnimationStart={onAnimationStart}
    onAnimationEnd={onAnimationEnd}
  >
    <div data-src="/path/to/image-0.png" />
    <div data-src="/path/to/image-1.png" />
    <div data-src="/path/to/image-2.jpg" />
  </AwesomeSlider>
);

Answer 1

有一个可以自动播放的HOC。这就是您所需要的。

import AwesomeSlider from 'react-awesome-slider'
import withAutoplay from 'react-awesome-slider/dist/autoplay'

const AutoplaySlider = withAutoplay(AwesomeSlider)

const Slider = () => (
<AutoplaySlider play={true}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</AutoplaySlider>
)

滑块自动播放ReactAwesome

1 个答案: