How fix CSS backdrop-filter blur in Slick slider?

Question

I'm using this CSS for slides in Slick slider:

backdrop-filter: blur(10px)

However, when I click to display the next slide, the CSS blur disappears for a second and then the slide blurs again. When dragging the slides with my mouse, the CSS blur disappears on mouseup.

How can I fix this?

CodePen: https://codepen.io/maxbeat/pen/abNBrex

.slider__item {
  height: 200px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 24px arial;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
}

Answer 1

Here is a working codepen.

You can use filter blur and then it will be smoothly:

filter: blur(1px);

Also, You need to split between the slide "shadow" layer and the slide "content" layer, as you want the content to be sharp and only the box background to be blurred.