Блог

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

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

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

#javascript #HTML #css #slick.js #css-фильтры

Вопрос:

Я использую этот 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);
}

Ответ №1:

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

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

 filter: blur(1px);

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

Комментарии:

1. Это сохраняет размытие при смене слайда, однако при этом также размывается содержимое слайда.

2. Это можно исправить, ему просто нужно разделить слои. Элементом слайдера с размытием должен быть zIndex 0 (просто для примера), а затем содержимое должно быть поверх этого — zIndex 1.

3. И еще, смотрите также поддержку браузера, фон против фильтра

4. мне нужно размытие за слайдом, фильтр css размывает только содержимое слайда, этот способ не решает мою проблему

5. Вы можете размыть слайд и расположить слой с содержимым над слайдером, таким образом, содержимое не будет размытым.

Ответ №2:

Для тех, кто все еще борется с этой проблемой. Просто отключите useTransforms и useCSS в объекте конфигурации слайдера. Например:

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