Карусель баннеров героя с Гэтсби + содержательная + реагирующая карусель - PullRequest
Новая
       7

Карусель баннеров героя с Гэтсби + содержательная + реагирующая карусель

0 голосов
/ 02 февраля 2020

Пытается использовать один из самых популярных пакетов "Карусель слайдеров", доступных реагировать на карусель, но не может понять, как его использовать с настройкой сайта c с 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`
  ...

error

1 Ответ

1 голос
/ 02 февраля 2020

Fixed. Можно также оставить этот вопрос здесь, так как это может быть хорошей настройкой для ползунков изображений на серверных сайтах, и в gatsby-image встроена мощная оптимизация изображений.

Это небольшое исправление работает: 

<Carousel showThumbs={false}>
...