Javascript 英雄旗帜旋转木马与盖茨比&x2B；知足的+；反应式旋转木马

尝试使用一个最流行的“滑动旋转木马”软件包来响应旋转木马，但不知道如何在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;

从“React”导入React；
从“@material ui/core/styles/”导入{makeStyles}；
从“盖茨比背景图像”导入背景图像；
导入'react responsive carousel/lib/styles/carousel.min.css'；
从“反应响应旋转木马”导入{Carousel}；
从“盖茨比图像”导入Img；
const useStyles=makeStyles（主题=>({
英雄法师：{
高度：“80vh”，
},
}));
常量旋转木马=（{data}）=>{
const classes=useStyles（）；
返回(
{/*  */}
{/*  */}
);
};
导出默认旋转木马；

查询终结点到Contentful在此工作的父级查找之前：

。。。
常量RootIndex=（{data}）=>{
const[author]=data.allContentfulPerson.edges；
const news=data.allcontentfullblogpost.edges；
返回(
*这是组件*
{/*  */}
);
};
导出默认根索引；
export const pageQuery=graphql`
...

---

已修复。最好把这个问题留在这里，因为这可能是服务器端渲染站点上图像滑块的一个很好的设置，而且盖茨比图像内置了一些强大的图像优化功能

这个小补丁有效：

...
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`
  ...

---

已修复。最好把这个问题留在这里，因为这可能是服务器端渲染站点上图像滑块的一个很好的设置，而且盖茨比图像内置了一些强大的图像优化功能

这个小补丁有效：

...
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`
  ...