React Photo Carousel

index.pug

#app

react-photo-carousel.markdown

React Photo Carousel

A Pen by Harmandeep Singh on CodePen.

License.

script.babel

const GUINEAPATHS = [
'https://image.ibb.co/bLO5h6/church_2464899_1920.jpg',
'https://image.ibb.co/jYRQh6/church_3015728_1920.jpg',
'https://image.ibb.co/evUd26/mont_saint_michel_688405_1920.jpg',
'https://image.ibb.co/gszNUm/mont_saint_michel_2489373_1920.jpg',
'https://image.ibb.co/doQU9m/moscow_2105606_1920.jpg',
'https://image.ibb.co/ebGrN6/san_francisco_1893985_1920.jpg'
];

class GuineaPigs extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentGP: 0 };
    this.interval = null;

    this.nextGP = this.nextGP.bind(this);
  }

  nextGP() {
    let current = this.state.currentGP;
    let next = ++current % GUINEAPATHS.length;
    this.setState({ currentGP: next });
  }

  componentDidMount() {
    this.interval = setInterval(this.nextGP, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    let src = GUINEAPATHS[this.state.currentGP];
    return (
      <div>
        <h1>React Photo Carousel</h1>
        <img src={src} />
      </div>
    );
  }
}

ReactDOM.render(
  <GuineaPigs />, 
  document.getElementById('app')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>

style.sass

html
  margin: 0
  height: 100%

body
  margin: 0
  height: 100%
  background-color: #29323B
  font-family: Helvetica, Arial, sans-serif
  text-align: center

#app
  position: relative
  height: 100%
  width: 100%
  padding-top: 10px
  div
    width: 100%
    div
      position: absolute
      height: 100%
      div
        position: relative
        height: auto

h1
  margin-left: 5%
  margin-right: 5%
  color: #FEFFFE

ul
  list-style-type: none
  padding: 0

img
  width: 600px
  border-radius: 10px

nav a
  margin: 12px
  text-transform: uppercase
  font-size: 10px

button
  -webkit-transition-duration: 0.1s
  /* Safari
  transition-duration: 0.1s
  background-color: #F4595B
  border-radius: 8px
  border-bottom: 4px solid #C24648
  color: white
  padding: 15px 32px
  text-align: center
  text-decoration: none
  display: inline-block
  font-size: 16px
  font-family: 'Oxygen', sans-serif
  letter-spacing: 2px
  &:hover
    background-color: #FF7375
    border: none
    border-radius: 8px
    border-bottom: 4px solid #C24648
    color: white
    padding: 15px 32px
    text-align: center
    text-decoration: none
    display: inline-block
    font-size: 16px
    font-family: 'Oxygen', sans-serif
    letter-spacing: 2px
  &:active
    background-color: #C24648
    border: none
    border-radius: 8px
    border-bottom: 4px solid #C24648
    color: #CCC
    padding: 15px 32px
    text-align: center
    text-decoration: none
    display: inline-block
    font-size: 16px
    font-family: 'Oxygen', sans-serif
    letter-spacing: 2px