Jump to content
Search Community

React + GSAP Draggable Slider

jeffdfarr test
Moderator Tag

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} />

export default MediaGrid


Link to comment
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.
  • Create New...