Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jeffdfarr

React + GSAP Draggable Slider

Recommended Posts

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

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×