0

I have a carousel that have some card items. but it gets blurred when the carousel animates. I couldn’t find a fix for this. I'm using Next.js with TypeScript.

const ref = useRef<any>();

  const settings = {
    arrows: false,
    variableWidth: true,
    infinite: true,
    draggable: true,
    speed: 2000,
    swipe: true,
    autoplay: true,
    autoplaySpeed: 2000,
    cssEase: 'linear',
  };

 <Slider {...settings} ref={ref}>
    {isLoading
      ? [...Array(9)].map((x, i) => <ExpertCardPlaceholder key={i} />)
      : experts.map(expert => <ExpertCard key={expert.userId} expert={expert} />)}
 </Slider>

enter image description here

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Anjula Samarasinghe
  • 227
  • 5
  • 10

1 Answers1

0

You can always set useTransforms to false

See reference here:

https://github.com/kenwheeler/slick/issues/2531#issuecomment-249303728

Meetai.com
  • 6,622
  • 3
  • 31
  • 38