DEV Community

Discussion on: My slider is not working as intended

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