My slider is not working as intended

#react #gatsby

Hey everyone. I have been trying to understand what's going on for hours, but could not solve this.

I am using Gatsbyjs. I have an index page where I query testimonials. I pass the results into a component. But the react-slick puts all the testimonials in the 1st slide multiple times, and all other slides are empty. Assuming I am using the map function wrong.
Here is the index template's relevant part: https://pastebin.com/NkqvxKsE
Here is the slider component: https://pastebin.com/3vxZtz27
Any feedback is appreciated.

Top comments (6)

Shaikh Muzaker • Jul 22 '20 • Edited

Hi Abduallah, As i checked your using map function in right way,

whenever using reat-slick there is necessary to update minified css link in public -> index.html which is mentioned below in the link.
dev-to-uploads.s3.amazonaws.com/i/...

and also if you are using flex in parent div of your slider then please avoid using flex for parent because react-slick already have defined the flex property so maybe conflict can come. few weeks before i faced the same issue but it got fixed by following the same method.

Hope it helps you for the solution.

abdullah • Jul 22 '20

Thanks Shaikh.

I import CSS files into all.sass like this:

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

The TestimonialsSlider component is in a "content" class of Bulma. So, I guess Bulma internally uses Flex?

When I change the loop and just put the 1st element in testimonials, it works. Such as this:

<div>
  <div className="has-text-centered testimonial">
    <blockquote>{testimonials[0].quote}</blockquote>
  </div>
  <div className="has-text-centered testimonialauthor">
    <p>—{testimonials[0].author}</p>
  </div>
</div>;