Question

嘿，我对React有点陌生。我找到了已实现的滑块，它工作正常。

https://caferati.me/demo/react-awesome-slider

我现在唯一的问题是我希望将其播放到“自动播放”，但似乎无法解决问题。据我了解，我需要创建一个对我有用的函数？

到目前为止，我的代码是。

class Slider extends Component {
  render() {
    return (

<div className="slider">
    <AwesomeSlider cssModule={styles}  onFirstMount={slider}>
        <div data-src={image2}>
            <div className="sliderText">
                <div>
                    <h1>Text For first sike</h1>
                    <NewsletterButton className="clickMe" text={I18n.t('ClickMe')}/>
                </div>
            </div>
        </div>
        <div data-src={image4}>
            <Fade left duration={2300}>
                <img className="sliderImage2" src={image3}/>
            </Fade>
            <Zoom duration={2000}>
                <div className="sliderText2">
                    <h1> Text For Slide2 </h1>
                    <p>Slide 2 Paragraph</p>
                </div>
            </Zoom>
        </div>
        <div data-src={image4}>
            <Zoom duration={2000}>
                <div className="sliderText3">
                    <h1> Slide3 </h1>
                    <p>Slider 3 paragrah</p>
                </div>
            </Zoom>
            <Fade bottom duration={2300}>
                <img className="sliderImage3" src={image1}/>
            </Fade>
        </div>
    </AwesomeSlider>
</div>
    );
  }
}

export default Slider;

Answer 1

您可以使用jQuery获取下一个按钮，并使用click（）这样的功能

Answer 2

您可以尝试以下方法：

创建一个计时器（您正在寻找自动播放），该计时器每2秒左右运行一次，并在其中调用名为setNextImage的方法。在您的componentDidUpdate()中，

setTimeout(this.setNextImage, 2000);
在您的方法中编写一些逻辑来更新状态。

setNextImage: function() { // setState method is used to update the state let index = this.state.currentIndex; if(index == yourMax_Image_Count) index == 1 this.setState({ : this.state.currentIndex -1 }); },
我看到AwesomeSlider中有一个属性selected，您可以将this.state.currentIndex设置为其值

确保正确处理超时。

Answer 3

componentDidMount() {
    const interval = setInterval(this.handleNextSlide, 12500);
    this.interval = interval;   }

  componentWillUnmount() {
    if (this.interval != null) {
      clearInterval(this.interval);
    }   }

  handleNextSlide = () => {
    const { dataSource } = this.props;
    const { currentIndex } = this.state;
    if(currentIndex == (dataSource && dataSource.length) - 1) {
      this.setState({
        currentIndex: 0
      });
    } else {
      this.setState({
        currentIndex: this.state.currentIndex + 1
      });
    }   }

  render() {
    const { dataSource } = this.props;
    const { currentIndex } = this.state;
    return (
      <AwesomeSlider
        selected={currentIndex}
        cssModule={AwsSliderStyles}
      >
        {dataSource && dataSource.map((value, key) => {
          return (
            //Do some stuff.
          );
        })}
      </AwesomeSlider>
    );
  }

Answer 4

通过导入“ withautoplay”尝试此操作

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

const AutoplaySlider = withAutoplay(AwesomeSlider)

并在组件中使用自动播放标签

<AutoplaySlider
        play
        cancelOnInteraction={false} // should stop playing on user interaction
        interval={6000}
      >
        <div data-src=/path/to/image.png />
        <div data-src=/path/to/image.png />
        <div data-src=/path/to/image.png />
      </AutoplaySlider>

您可以点击此链接以获取更多详细信息，https://www.npmjs.com/package/react-awesome-slider

React Js AwesmeSlider自动播放

4 个答案: