带有 Gatsby + Contentful + react 响应式轮播的英雄横幅轮播答案

【问题标题】：Hero banner carousel with Gatsby + Contentful + react responsive carousel带有 Gatsby + Contentful + react 响应式轮播的英雄横幅轮播
【发布时间】：2020-02-03 03:29:41
【问题描述】：

尝试使用可用的最流行的“Slider carousel”软件包之一 react-responsive-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;

之前找到 Contentful 的查询端点的父级：

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

【问题讨论】：

标签： javascript reactjs gatsby contentful

【解决方案1】：

已修复。不妨把这个问题留在这里，因为这可能是服务器端渲染网站上图像滑块的一个很好的设置，并且 gatsby-image 内置了一些强大的图像优化。

这个小修复有效：

<Carousel showThumbs={false}>

【讨论】：