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:

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

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

• javascript
• html
• css
• slick.js
• css-filters

Share Improve this question Follow edited Aug 22, 2020 at 22:57 Ed Lucas 7,36544 gold badges4040 silver badges5050 bronze badges asked Aug 22, 2020 at 13:17 Maxim MakarkinMaxim Makarkin 10511 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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

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

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