Как исправить размытие фонового фильтра CSS в слайдере Slick?

Я использую этот CSS для слайдов в слайдере Slick:

backdrop-filter: blur(10px)

Однако, когда я нажимаю, чтобы отобразить следующий слайд, размытие CSS исчезает на секунду, а затем слайд снова размывается. При перетаскивании слайдов мышью размытие CSS исчезает при наведении курсора мыши.

Как я могу это исправить?

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
person Maxim Makarkin    schedule 22.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот рабочий codepen.

Вы можете использовать фильтр размытия, и тогда оно будет плавным:

filter: blur(1px);

Кроме того, вам необходимо разделить слой тени слайда и слой содержимого слайда, так как вы хотите, чтобы содержимое было четким, а фон - размытым.

person Asaf    schedule 22.08.2020
comment
Это сохраняет размытие во время смены слайда, но также размывает содержимое слайда. - person Ed Lucas; 23.08.2020
comment
Это можно исправить, ему просто нужно разбить слои. Элемент слайдера с размытием должен иметь значение zIndex 0 (только для примера), а затем содержимое должно быть поверх этого - zIndex 1. - person Asaf; 23.08.2020
comment
И еще: см. Также поддержку браузера, backdrop vs фильтр - person Asaf; 23.08.2020
comment
мне нужно размытие за слайдом, размытие фильтра css только содержимое слайда, это не решит мою проблему - person Maxim Makarkin; 23.08.2020
comment
Вы можете размыть слайд и расположить слой с содержимым над слайдером, чтобы содержимое не было размытым. - person Asaf; 23.08.2020
comment
div за слайдером не размывается с размытием слайда - person Maxim Makarkin; 24.08.2020
comment
Привет, добавила рабочую ручку :), это то, что тебе нужно? - person Asaf; 24.08.2020
comment
Нет, div за слайдом не размыт - person Maxim Makarkin; 24.08.2020