React + GSAP Draggable Slider

[jeffdfarr]

I'm looking for a developer to convert

See the Pen qBOzVwb by jeffdfarr (@jeffdfarr) on CodePen.

into React.

 

This was what I had started. It's still missing the infinite loop and auto play feature.

function MediaGrid ({title, text, media}) {
  
  // Create variables
  let slider = useRef(null);
	
  useEffect(() => {
    gsap.registerPlugin(Draggable, InertiaPlugin);


    // Make slider draggable
    Draggable.create(slider, {
      type: "x",
      inertia: true,
    }, []);

  });

  return (
  <section className="block media-grid" style={background}>
    <div className="slides-container" ref={el => slider = el}>
      {media && media.map((media, index) => (
        <div key={index} className="slideContainer">
          <div className="slide">
            {media.slide && media.slide.map((slide, index) => (
              <div key={index} className="img-wrap">
                <Img key={slide.id} fluid={slide.remoteFile.childImageSharp.fluid} />
              </div>
             ))}
          </div>
        </div>
      ))}
    </div>
  </section>
  )
}

export default MediaGrid