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)
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.
Thanks Shaikh.
I import CSS files into all.sass like this:
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:
ok then might be you need to map your data based on response of the data structure.
sorry for the late response
UPDATE:
Turned out PurgeCSS was purging slick related CSS classes... I disabled it for now and slider works as it should.
this update was a lifesaver, thank you!
Agree!