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

【问题标题】：All gatsby-image images being rendered as one slide using react-slick使用 react-slick 将所有 gatsby-image 图像渲染为一张幻灯片
【发布时间】：2020-05-16 08:02:03
【问题描述】：

我已经为这个问题苦苦挣扎了几个周末。我正在尝试使用react-slick 在我的（第一个）盖茨比网站中构建一个轮播，但是当我在运行gatsby develop 后查看前端时，滑块已初始化，但获取输出的标记格式不正确，导致滑块无法工作。

我在我的index.js 页面like this 上调用this component，但是页面上呈现的输出如下所示：

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

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

【问题讨论】：

标签： javascript reactjs gatsby react-slick gatsby-image

【解决方案1】：

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

即。

npm install slick-carousel

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

根据文档here

如果由于某种原因这不起作用，您可以尝试直接从节点模块文件中的位置引用 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 文件内。

【讨论】：

【解决方案2】：

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

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>
    ) }
  />
)

【讨论】：