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