Slideshow

slideshow.js

/**
 * @file components/global/slideshow.js
 */
import React, { Component } from 'react';
import { Link, hashHistory } from 'react-router';
import {
      Button as Button,
      Carousel as OnsCarousel,
      CarouselItem as OnsCarouselItem
} from 'react-onsenui';

/**
 * @class
 * @description the slideshow component
 */
export default class Slideshow extends Component {

  /**
   * @constructor
   * @param {Object} props - react props object
   */
  constructor(props) {
    super(props);
    this.state = {
      slides: [
        {key: 0, src: 'img/fpo/login.png' },
        {key: 1, src: 'img/fpo/login1.png' },
        {key: 2, src: 'img/fpo/login2.png' }
      ],
      index: 0
    };
  }


  /**
   * @method
   * @description (handle the click)
   */
  handleClick(index) {
    this.setState(index)
    console.log("handleClick" + this.state.index )
  }

  /**
   * @method
   * @description (fires when slide is changed)
   */
  handleSlideChange(e) {
    this.setState({index: e.activeIndex}, () => {
      console.log(`Active slide: ${this.state.index}` );
    });
  }

  /**
   * @method
   * @description renders the slideshow dots
   */
  generateDots() {
    return this.state.slides.map((slide) => {
      if (slide.key == this.state.index) {
        return <span key={slide.key} style={{cursor: 'pointer'}}>●</span>;
      } else {
        return <span key={slide.key} style={{cursor: 'pointer'}}>○</span>;
      }
    });
  }

  /**
   * @method
   * @description renders the slideshow slides
   */
  generateSlides() {
    return this.state.slides.map((slide) => {
       return <OnsCarouselItem key={ slide.key }><img src={ slide.src }/></OnsCarouselItem>
    });
  }

  /**
   * @method
   * @description the main react render method
   * @returns {JSX}
   */
  render() {
    return (
      <div id="Intro_Slideshow">
        <h3>Make your mark on the world.</h3>
        <div onClick={this.handleClick}>test</div>
        <div>
          <OnsCarousel swipeable autoScroll overscrollable index={this.state.index} onPostChange={event => this.handleSlideChange(event)} autoScrollRatio={0.1}>
            { this.generateSlides() }
          </OnsCarousel>
          <div style={{textAlign: 'center', fontSize: 20}}>
            { this.generateDots() }
          </div>
        </div>
        <p>Lorem ipsum dolor sit amet conse
ctetur adipiscing elit, sed.</p>
      </div>
    );
  }

}