DEV Community

abdullah
abdullah

Posted on

My slider is not working as intended

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)

Collapse
 
1995muzaker profile image
Shaikh Muzaker • 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.

Collapse
 
abdu profile image
abdullah

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>;
Collapse
 
1995muzaker profile image
Shaikh Muzaker

ok then might be you need to map your data based on response of the data structure.

sorry for the late response

Collapse
 
abdu profile image
abdullah • Edited

UPDATE:

Turned out PurgeCSS was purging slick related CSS classes... I disabled it for now and slider works as it should.

Collapse
 
natalyjazzviolin profile image
Nataly Merezhuk

this update was a lifesaver, thank you!

Collapse
 
adamcbowman profile image
Adam Bowman

Agree!