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);
}

Cogan

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.

Sabah

That does keep the blur during slide change, however it blurs the contents of the slide as well. – Shenitashenk

It's can be fixed, he just needs to split the layers. Slider item with blur should be zIndex 0 (just for the example) and then the content should be on top of that - zIndex 1. – Sabah

And another thing, see the browser support as well, backdrop vs filter – Sabah

me need blur behind the slide, css filter blur only slide content, this way not fix my problem – Cogan

You can blur the slide, and position the layer with content above the slider, that way the content will not be blurred. – Sabah

div behind slider not be blurred with blur the slide – Cogan

Hi, I've added a working pen :), It's what you needed? – Sabah

No, div behind slide not blurred – Cogan

Answer 2

Use the bellow CSS. the blur effect which is by default in slick slider will be removed.

.slick-active{
    opacity: 1 !important;
}

Rustice

Answer 3

For those who are still struggling with this issue. Just disable useTransforms and useCSS in the slider's config object. For example:

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 4500,
  ladyload: 'ondemand',
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  useCSS: false,
  useTransform: false
});

Fallow