使用 react-slick 将所有 gatsby-image 图像渲染为一张幻灯片

Question

我已经在这个问题上苦苦挣扎了几个周末。 I'm trying to build a carousel in to my (first) Gatsby website using react-slick slick however when I view the frontend after running gatsby develop the slider initialised but the markup that gets output is malformed, causing the slider to not work.

我在我的index.js页面上调用这个组件，但是页面上呈现的 output 如下所示：

<div class="art_list__slider">
<div class="slick-slider slick-initialized">
    <div class="slick-list">
        <div class="slick-track" style="width: 1348px; opacity: 1; transform: translate3d(0px, 0px, 0px);">
            <div aria-hidden="false" class="slick-slide slick-active slick-current" data-index="0" style="outline: none; width: 1348px;" tabindex="-1">
                <div>
                    <div>
                        <div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
                            // image slide here - code removed for space
                        </div>
                    </div>
                    <div>
                        <div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
                            // image slide here - code removed for space
                        </div>
                    </div>
                    <div>
                        <div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
                            // image slide here - code removed for space
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

从上面的渲染中可以看出，所有单独的图像都渲染为一张幻灯片。 我怎样才能解决这个问题？

Answer 1

您还需要确保导入 css。 根据您使用的 React Slick 版本，您还需要包含它

IE。

npm install slick-carousel

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

根据此处的文档

如果由于某种原因这不起作用，您可以尝试直接从节点模块文件中的位置引用 css。 或者，您可以尝试使用 cdn 解决方案。

如果使用 React Helmet，你可以尝试类似

   <Helmet>
     <link
        rel="stylesheet"
        href="href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" "
      ></link>
    </Helmet>

在 React 组件中，如果您在项目的许多地方使用它，您正在渲染轮播或在 Layout.js 文件中。

Answer 2

由于 react-slick 期望每个子节点都是它自己的幻灯片，因此您可能必须在您制作 staticQuery 的同一组件中呈现您的 slider

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import Slider from "react-slick"

export default props => (
  <StaticQuery
    query = {graphql`
      query {
        allFile(
          filter: {
            extension: { regex: "/(jpg)|(png)|(jpeg)/" }
            relativeDirectory: { eq: "gallery" }
          }
        ) {
          edges {
            node {
              base
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
              }
            }
          }
        }
      }
    `}
    render = { data => (
      <Slider {...sliderSettings}>
        {data.allFile.edges.slice(0, `${props.limit}`).map(image => (
          <div key={image.node.childImageSharp.fluid.src}>
            <Img fluid={image.node.childImageSharp.fluid} style={{ margin: '3rem 0' }} />
          </div>
        ))}
      </Slider>
    ) }
  />
)