Today, I want to give a snick peek of how I built my carousel using gatsby and gatsby-image. You can check the result on the home page.Only that mine changes automatically, we will be building a very similar one that would change on a click event.
spoiler ALERT!!!: there is a gatsby plugin that helps with carousel. I have never used it before and do not know about how cool it is. But you can sure give it a try.
Step 1
Clone the starter with the code below(this might take a few minutes depending on the strength of the network in your area).
{
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
}
Step 2
If you have successfully cloned the repo, import few images from your computer picture folder into the images directory on you newly installed gatsby-starter folder.
protip!!!: ensure you rename the images so it easy to be referenced. You should have something like this
{
images>
gatsby-icon.png
image1.jpg
image2.jpg
image3.jpg
image4.png
}
Step 4
In your layout.js file paste the grapql query below. However ensure you have the gatsby-image installed else check out gatsby site and download the gatsby-image real quick. If you have everything inorder, lets proceed
{
const data = useStaticQuery(
graphql`
query {
image1:file(relativePath: { eq: "image1.jpg" }) {
childImageSharp {
fluid(maxWidth: 190, maxHeight: 190) {
...GatsbyImageSharpFluid
}
}
}
image2:file(relativePath: { eq: "image2.jpg" }) {
childImageSharp {
fluid(maxWidth: 190, maxHeight: 190) {
...GatsbyImageSharpFluid
}
}
}
image3:file(relativePath: { eq: "image3.jpg" }) {
childImageSharp {
fluid(maxWidth: 190, maxHeight: 190) {
...GatsbyImageSharpFluid
}
}
}
image4:file(relativePath: { eq: "image4.png" }) {
childImageSharp {
fluid(maxWidth: 190, maxHeight: 190) {
...GatsbyImageSharpFluid
}
}
}
}
`
}
Step 4
You can now return the image to the screen.
{
const arrayIt = [
{image: data.image1.childImageSharp.fluid},
{image: data.image2.childImageSharp.fluid},
{image: data.image3.childImageSharp.fluid},
]
let image = arrayIt[index].image
}
step 5
pass this into the top of your file so that
{
function Image() {
const [index, setIndex] = useState(1)
}
Last Step
We would quickly create a next and previous button so that the images change on click of either button.
pit fall
this method can be unhealthy for production purpose but it sure does provide a lot understanding and knowledge that can help out in the next tutorial. Also you can just clone my repo to see how everything work on my side.
**Joke Time : dedicated to Victor**
If a female tiger is called tigress, what is a female dog called??
**What if I interview you : little quick questions I try and answer myself**
Create an higher order function that takes a list or an array and simple return a log of each item in the list. So that
{
reply([1,2,3,4,"kelvin"], print_to_console) // returns 1,2,3,4,"kelvin"
}
Closing Note:
Thank you again for reading and following my silly instrutions. Hope I helped out.