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