All gatsby-image images being rendered as one slide using react-slick

Question

I have been struggling with this issue for a few weekends now. I'm trying to build a carousel in to my (first) Gatsby website using react-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.

I am calling this component on to my index.js page like this , however the rendered output on page looks like this:

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

As you can see from the render above, ALL of the individual images are rendering as one slide. How can I fix this?

Answer 1

You need to make sure you import the css as well. Depending on what version of the React Slick you are using you need to include that as well

ie.

npm install slick-carousel

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

As per documentation here

If that is not working for some reason, you can try to reference the css straight from where it is in your node modules file. Alternatively you can try using the cdn solution.

If using React Helmet you can try something like

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

Inside the React Component you are rendering your carousel or inside the Layout.js file if you are using this in many places in your project.

Answer 2

As react-slick expects each child node to be it's own slide, you're probably going to have to render your slider in the same component that you make the 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>
    ) }
  />
)