有没有一个好的react转盘组件可以与盖茨比图像一起使用

Question

我正在尝试制作一个旋转木马来显示我所做项目的一些图像。我知道周围有很多react旋转木马组件，所以有人知道其中一个能很好地与盖茨比图像配合使用吗？

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