Изменить цвет изображения сова-карусель

Question

У меня есть 3 изображения в ползунке сова-карусель, и я использовал

-webkit-filter: grayscale(100%); 
filter: grayscale(100%);

CSS-теги, которые преобразуют все 3 цветных изображения в оттенки серого, но я хочу, чтобы, когда слайдер запускал каждое 2-е изображение, егодолжен быть показан в его родных цветах. Пожалуйста, обратитесь к приложенному образцу для справки

Я пробовал несколько способов, но, к сожалению, я не могу понять, как поймать центральный слайдер на сове-карусели.

Answer 1

Вы видите, что к активным элементам будет добавлен класс active.И вы можете использовать этот CSS

.owl-item.active:nth-child(2) .item img {
   -webkit-filter: grayscale(100%); 
   filter: grayscale(100%);
}

Поскольку у вас есть 3 элемента, второй ребенок всегда будет серой шкалой.

Answer 2

Вы захотите последовать примеру "центра" OWL.

Ссылка здесь: https://owlcarousel2.github.io/OwlCarousel2/demos/center.html

Когда вы настраиваете свою карусель таким образом, элементу в центре присваивается класс center.

Вы можете назначить свой фильтр CSS на .owl-carousel .center img или .owl-carousel .center в зависимости от настроек.