I'm looking for a developer to convert this slider 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