React spring

ProductImagesSlider.js

import React from 'react'
import { Transition, animated } from 'react-spring';

class ProductImagesSlider extends React.PureComponent {
  state = { index: 0 };
  interval = void 0;

  componentDidMount() {
    const interval = this.props.interval || 5000;
    this.interval = setInterval(() => this.gotToNextImg(), interval);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
    this.interval = void 0;
  }

  gotToNextImg = (e) => {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    const length = this.props.variants.size;
    this.setState(({ index }) => ({ index: (index + 1) % length }))
  }

  render() {
    const { theme, config, variants } = this.props;
    const { index } = this.state;
    return (
      <div onClick={this.gotToNextImg} style={{ paddingBottom: '100%', position: 'relative'}}>
        <Transition
          native
          initial={null}
          keys={index}
          from={{ opacity: 0, transform: 'translate3d(100%,0,0)' }}
          enter={{ opacity: 1, transform: 'translate3d(0%,0,0)' }}
          leave={{ opacity: 0, transform: 'translate3d(-50%,0,0)' }}>
          { 
            style =>
            <animated.div
              key={index}
              style={{...style, position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }}>
              <Image
                className={classNames(theme.image)}
                aspectRatio={config.getIn(['product', 'image', 'aspectRatio'], 1)}
                src={variants.getIn([index, 'image_url'])}
                alt={variants.getIn([index, 'title'])}
              />
            </animated.div>
          }
        </Transition>
      </div>
    )
  }
}

usage.js

({ item, config, theme }) => 
  <ProductImagesSlider variants={item.get('variants')} config={config} theme={theme} />