Sometimes slides don't get correct styles.

[oleksandrsemeniuk-Metamindz]

I'm working with Nextjs and sometimes after updates (specifically when I click on the link in the slide and update the page) some slides do not get the min-width, max-width and transform: translate3d styles.

And because of that, they look like this. The last 2 slides don't even move when I'm scrolling or dragging.

Slider is initialized like this

const [ref, internalSlider] = useKeenSlider<HTMLDivElement>({
    breakpoints: {
      "(min-width: 200px)": {
        slides: { perView: 1.2, spacing: 27 }
      },
      "(min-width: 768px)": {
        slides: { perView: 2, spacing: 27 }
      },
      "(min-width: 1200px)": {
        slides: { perView: 3, spacing: 27 }
      }
    }
  });

Unfortunately, I cannot provide a repo with a reproducible example, since it's happening on my work project.

[kb1995]

I also have the same issue, but using Gatsby. I've used the same code for Next.js and it works correctly but the transforms styles are only applied when I change my browser width

[oleksandrsemeniuk-Metamindz]

I also have the same issue, but using Gatsby. I've used the same code for Next.js and it works correctly but the transforms styles are only applied when I change my browser width

@kb1995 Were you able to find a workaround for this or fix the issue?

[Nodios]

I encountered the same issue with NextJS and the workaround for me was having an effect that updates KS options - to be precise, just reapplies them.

Like this

    useEffect(() => {
        slider.current?.update(ksOptions);
    }, [items]);

And simplified page would look like this:

const ksOptions: KeenSliderOptions = {
    // ... options here
}

type Item = { id: string };
type PageProps = {
    items: Item[];
}

const Page: NextPage<PageProps> = ({ items }) => {
    const [ref, slider] = useKeenSlider(ksOptions);

    // This fixes the issue with inline styling not being applied
    useEffect(() => {
        slider.current?.update(ksOptions);
    }, [items]);

    return (
        <div ref={ref} className="keen-slider">
            {items.map(i => (
                <div key={i.id} className="keen-slider__slide">
                    {/* CONTENT */}
                </div>
            ))}
        </div>
    )
}