Using with Gatsby Image

[ssdrum]

Is there a way to use this with gatsby images?

[lbouriez]

Looking for this answer too

[lbouriez]

I did it like this without using gatsby image: `import { useState } from "react"; import AwesomeSlider from 'react-awesome-slider'; import withAutoplay from 'react-awesome-slider/dist/autoplay'; import 'react-awesome-slider/dist/styles.css'; import { useStaticQuery, graphql } from "gatsby"; import React from "react"; import Img from "gatsby-image"

const AutoplaySlider = withAutoplay(AwesomeSlider);

const ControlledCarousel = () => { const [index, setIndex] = useState(0);

const handleSelect = (selectedIndex: React.SetStateAction<number>, e: any) => {
    setIndex(selectedIndex);
};

const { allFile: { edges } } = useStaticQuery(graphql`
{
    allFile(filter: {extension: {regex: "/(jpg)/"}, relativeDirectory: {eq: "caroussel"}}) {
    edges {
        node {
        childImageSharp {
            fluid(maxWidth: 1200) {
                ...GatsbyImageSharpFluid
            }
        }
        }
    }
    }
}
`)

return (
    <AutoplaySlider
        play={true}
        cancelOnInteraction={false} // should stop playing on user interaction
        interval={6000}
    >
        {edges.map((image: { node: { childImageSharp: { fluid: import("gatsby-image").FluidObject }; }; }, index: number) => (
            <div key={index} data-src={image.node.childImageSharp.fluid.src}>
            </div>

        ))}
    </AutoplaySlider>
);

}

export default ControlledCarousel;`

[milind2945]

@lbouriez is your autoplay working?

[lbouriez]

@lbouriez is your autoplay working?

Yes 👍