/Javascript/React/Automatic Slideshow in react js

Automatic Slideshow in react js

import React from 'react';

import SlidesShowStore   from '../stores/SlidesShowStore';
import SlidesShowActions from '../actions/SlidesShowActions';
import Slides from '../components/Slides';

class SlidesShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = SlidesShowStore.getState();
    this.onChange = this.onChange.bind(this);
    this.IMAGES = [];
  }

  componentDidMount() {
    SlidesShowStore.listen(this.onChange);
    this.tick();
    SlidesShowActions.startTimer();
    this.handleChange();
  }

  componentWillUnmount() {
    SlidesShowStore.unlisten(this.onChange);
  }

  onChange(state) {
    this.setState(state);
  }

  handleChange() {
    this.setState(SlidesShowStore.getState());
  }

  toggleNext( event) {
    event.preventDefault();
    var current = this.state.currentSlide;
    var next = current + 1;
    if (next > this.IMAGES.length - 1) {
      next = 0;
    }
    this.setState( {currentSlide: next} );
  }

  togglePrev(event) {
    event.preventDefault();   
    var current = this.state.currentSlide;
    var prev = current - 1;
    if (prev < 0) {
      prev = this.IMAGES.length - 1;
    }
    this.setState( {currentSlide: prev} );  
  }   

  toggleSlide(id) {
    var index = this.IMAGES.map(function (el) {
      return (
        el.id
      );
    });
    var currentIndex = index.indexOf(id);       
    this.setState( {currentSlide: currentIndex} );
  }

  Next() {
    var current = this.state.currentSlide;
    var next = current + 1;
    if (next > this.IMAGES.length - 1) {
      next = 0;
    }
    this.setState( {currentSlide: next} );
  }

  tick() {
    var self = this;
    this.interval = setTimeout(function() {
      if (self.state.status === 'stop') {
        self.interval = undefined;
        return;
      }
      if (self.state.timeLeft <= 0) {
        SlidesShowActions.timeout();
      } else {
        SlidesShowActions.tick();
        self.Next();
      }
      self.tick();
    }, 1000);
  }

  handleClickStart(event) {
    event.preventDefault();  
    this.tick();
    SlidesShowActions.startTimer();
    this.handleChange();
  }

  handleClickStop(event) {
    event.preventDefault(); 
    SlidesShowActions.stopTimer();
    this.handleChange();
  }

  handleClickReset(event) {
    event.preventDefault();  
    SlidesShowActions.resetTimer();
  }

  render() {
    this.IMAGES = [
     {id: "slide1", imagePath : "/img/img1.jpg", imageAlt : "Slide 1 Image", title : "Slide 1", subtitle : "Slide 1 Image SubTitle", text : "Slide 1 Image Text", action : "Slide 1 Image Action", actionHref : "href"  },
     {id: "slide2", imagePath : "/img/img2.jpg", imageAlt : "Slide 2 Image", title : "Slide 2", subtitle : "Slide 2 Image SubTitle", text : "Slide 2 Image Text", action : "Slide 2 Image Action", actionHref : "href"  },
     {id: "slide3", imagePath : "/img/img3.jpg", imageAlt : "Slide 3 Image", title : "Slide 3", subtitle : "Slide 3 Image SubTitle", text : "Slide 3 Image Text", action : "Slide 3 Image Action", actionHref : "href"  }
    ];

    var self = this;
    var paginationNodes = this.IMAGES.map(function (paginationNode, i) {
      var boundClick = self.toggleSlide.bind(self, paginationNode.id);
      return (
        <span className="pager" onClick={boundClick}>  key={paginationNode.Title}  </span>
      );
     });

   return (  
    <div className="container">
      <div className="slideshow">
        <link rel="stylesheet" href="css/styles.css" />
        <Slides data={this.IMAGES} currentSlide={this.state.currentSlide} />
        <div className="pagination">{paginationNodes}</div>
        <div className="toggle toggle--prev" onClick={this.togglePrev.bind(this)}>Prev</div>
        <div className="toggle toggle--next" onClick={this.toggleNext.bind(this)}>Next</div>    
        <button onClick={this.handleClickStart.bind(this)}>Start</button>
        <button onClick={this.handleClickStop.bind(this)}>Stop</button>
        <button onClick={this.handleClickReset.bind(this)}>Reset</button>   
       </div>
    </div>
    );
  }
}

export default SlidesShow;

Source: stackoverflow.com

Similar codes

0 vote240 views2 answers
Run build version react
Javascript React
5 votes242 views3 answers
Get url react
Javascript React
15 votes216 views2 answers
React check if url address is valid
Javascript React
17 votes216 views6 answers
React native build android
Javascript React
0 vote241 views1 answer
React-scripts not found
Javascript React
2 votes227 views3 answers
React cdn link
Javascript React
1 vote235 views1 answer
React-native-paper password input
Javascript React
1 vote216 views1 answer
Implementating step component in react
Javascript React
0 vote268 views1 answer
How to use radio buttons in react class-based components
Javascript React
10 votes256 views1 answer
Dimensions react native
Javascript React