reactjs - 是否有适用于 gatsby-image 的良好反应轮播组件？

Question

我正在尝试制作一个轮播来显示我所做的项目的一些图像。我知道周围有很多反应轮播组件，所以有人知道可以与 gatsby-image 一起使用的组件吗？

Answer 1

我使用react-slick它非常好，我可以让它与 Gatsby Image 一起使用。

页面中的示例：

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

import Slider from "react-slick"
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"

const settings = {
  dots: false,
  infinite: true,
  autoplay: true,
}

const CarouselPage = ({ data }) => {
  return (
    <Slider {...settings} className="overflow-hidden">
      <Img fluid={data.image1.childImageSharp.fluid} />
      <Img fluid={data.image2.childImageSharp.fluid} />
    </Slider>
  )
}

export const query = graphql`
  query {
    image1: file(relativePath: { eq: "my-image-1-path.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image2: file(relativePath: { eq: "my-image-2-path.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default CarouselPage