title: All gatsby-image images being rendered as one slide using react-slick
body: <p>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 <code>react-slick</code> however when I view the frontend after running <code>gatsby develop</code> the slider initialised but the markup that gets output is malformed, causing the slider to not work.</p>
  
  <p>I am calling <a href="https://gist.github.com/realchriswells/9877555af377ed9e801ac18c8b50c70a" rel="nofollow noreferrer">this component</a> on to my <code>index.js</code> page <a href="https://gist.github.com/realchriswells/9be9c47caca5b81079aedce29f125997" rel="nofollow noreferrer">like this</a>, however the rendered output on page looks like this:</p>
  
  <pre><code>&lt;div class="art_list__slider"&gt;
  &lt;div class="slick-slider slick-initialized"&gt;
      &lt;div class="slick-list"&gt;
          &lt;div class="slick-track" style="width: 1348px; opacity: 1; transform: translate3d(0px, 0px, 0px);"&gt;
              &lt;div aria-hidden="false" class="slick-slide slick-active slick-current" data-index="0" style="outline: none; width: 1348px;" tabindex="-1"&gt;
                  &lt;div&gt;
                      &lt;div&gt;
                          &lt;div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;"&gt;
                              // image slide here - code removed for space
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;"&gt;
                              // image slide here - code removed for space
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;"&gt;
                              // image slide here - code removed for space
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you can see from the render above, ALL of the individual images are rendering as one slide. How can I fix this?</p>