[尝试使用可用的最受欢迎的“滑块轮播”软件包之一,但react- response-carousel却无法使用Gatsby + Contentful的静态站点设置来使用它。我正在尝试在本地运行此代码。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles/';
import BackgroundImage from 'gatsby-background-image';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import { Carousel } from 'react-responsive-carousel';
import Img from 'gatsby-image';
const useStyles = makeStyles(theme => ({
heroImage: {
height: '80vh',
},
}));
const HeroCarousel = ({ data }) => {
const classes = useStyles();
return (
<Carousel>
<div>
<BackgroundImage
fluid={data.heroImage.fluid}
className={classes.heroImage}
/>
{/* <Img fluid={data.heroImage.fluid} className={classes.heroImage} /> */}
</div>
<div>
<BackgroundImage
fluid={data.heroImage.fluid}
className={classes.heroImage}
/>
{/* <Img fluid={data.heroImage.fluid} className={classes.heroImage} /> */}
</div>
</Carousel>
);
};
export default HeroCarousel;
在此找到满足工作要求的查询终结点的父对象之前找到:
...
const RootIndex = ({ data }) => {
const [author] = data.allContentfulPerson.edges;
const news = data.allContentfulBlogPost.edges;
return (
<>
<HeroCarousel showThumbs={false} data={author.node} /> *Here is the component*
{/* <HeroBanner data={author.node} /> */}
</>
);
};
export default RootIndex;
export const pageQuery = graphql`
...
已修复。不妨在此留下这个问题,因为这可能是服务器端渲染站点上图像滑块的一个不错的设置,并且gatsby-image内置了一些强大的图像优化。
此小技巧起作用:
<Carousel showThumbs={false}>