-1

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

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

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

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

4

2 回答 2

2

您还需要确保导入 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 文件中。

于 2020-05-17T19:38:18.707 回答
0

由于 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>
    ) }
  />
)
于 2020-05-16T09:42:32.890 回答