DZuz14

/** @jsx jsx */
import React from 'react'
import { css, jsx } from '@emotion/core'

const SliderContent = props => (
  <div
    css={css`
      transform: translateX(-${props.translate}px);
      transition: transform ease-out ${props.transition}s;
      height: 100%;

DZuz14

const autoPlayRef = useRef()
const transitionRef = useRef()
const resizeRef = useRef()

useEffect(() => {
  autoPlayRef.current = nextSlide
  transitionRef.current = smoothTransition
  resizeRef.current = handleResize
})

DZuz14

/** @jsx jsx */
import React, { useState, useEffect, useRef } from 'react'
import { css, jsx } from '@emotion/core'
import SliderContent from './SliderContent'
import Slide from './Slide'
import Arrow from './Arrow'
import Dots from './Dots'

const getWidth = () => window.innerWidth

DZuz14

const smoothTransition = () => {
  let _slides = []

  // We're at the last slide.
  if (activeSlide === slides.length - 1)
    _slides = [slides[slides.length - 2], lastSlide, firstSlide]
  // We're back at the first slide. Just reset to how it was on initial render
  else if (activeSlide === 0) _slides = [lastSlide, firstSlide, secondSlide]
  // Create an array of the previous last slide, and the next two slides that follow it.
  else _slides = slides.slice(activeSlide - 1, activeSlide + 2)

DZuz14

const autoPlayRef = useRef()
const transitionRef = useRef()

useEffect(() => {
  autoPlayRef.current = nextSlide
  transitionRef.current = smoothTransition
})

useEffect(() => {
  const play = () => {

DZuz14

/** @jsx jsx */
import React, { useState, useEffect, useRef } from 'react'
import { css, jsx } from '@emotion/core'
import SliderContent from './SliderContent'
import Slide from './Slide'
import Arrow from './Arrow'
import Dots from './Dots'

const getWidth = () => window.innerWidth

DZuz14

import React from 'react'
import ReactDOM from 'react-dom'
import Slider from './components/Slider'

const images = [
  'https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
  'https://images.unsplash.com/photo-1470341223622-1019832be824?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2288&q=80',
  'https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80',
  'https://images.unsplash.com/photo-1534161308652-fdfcf10f62c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2174&q=80'
]

DZuz14

  useEffect(() => {
    const play = () => {
      autoPlayRef.current()
    }

    const interval = setInterval(play, props.autoPlay * 1000)
    return () => clearInterval(interval)
  }, [])

...rest of Slider component

DZuz14

import React, { useState, useEffect, useRef } from 'react'

const autoPlayRef = useRef()

useEffect(() => {
  autoPlayRef.current = nextSlide
})

...rest of Slider component

DZuz14

/** @jsx jsx */
import React, { useState, useEffect, useRef } from 'react'
import { css, jsx } from '@emotion/core'
import SliderContent from './SliderContent'
import Slide from './Slide'
import Arrow from './Arrow'
import Dots from './Dots'

/**
 * @function Slider