Search code examples
wordpresscarouselgatsbyjamstack

Gatsby + Wordpress how to create an image carousel?

I'm new to JAMstack and I would like to know what is the best way to create an image carousel using Gatsby and Wordpress.

Solution

  • its a little hard to explain the entire process without knowing where you are at with it.

    How are you currently connecting gatsby and wordpress cms? are you using graphql or are fetching json from an endpoint/URL.

    So if you are using a wordpress headless CMS I would create two models

    • Carousel content model (This will take slide content entrys)
    • Slide Content Model (Where you create entries of your image carousel and description)

    I have not used wordpress cms, only contentful but the principle should be the same.

    once you have created the models you can fetch from an endpoint. you will need to read the wordpress docs. for this.

    But I would recommend you use GRAPHQL instead. it has a gatsby plugin. https://www.gatsbyjs.org/packages/gatsby-source-wordpress/

    this means you can pull all the data from your wordpress api. you will probably need an access token and a spaceid somewhere in the wordpress account you made.

    you will then need to make an graph query getting the data you need from the API.

    then you plug the data into the JSX

    use react slick to make life easier for you. https://www.npmjs.com/package/react-slick

    hope this helps a little bit.