更改猫头鹰轮播图片的颜色

Question

我在猫头鹰传送带滑块中有3张图像，并且已使用

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

CSS标记将所有3个彩色图像都转换为灰度图像，但是我想要的是，当滑块每运行第2个图像时，它应该以其本机颜色显示。 Please see the attached sample for reference

我尝试了几种方法，但是不幸的是，我无法弄清楚如何抓住猫头鹰轮播上的中心滑块。

Answer 1

您将要遵循OWL的“中心”示例。

链接在这里：https://owlcarousel2.github.io/OwlCarousel2/demos/center.html

当您像这样配置轮播时，位于中心的项目将分配为​​center类。

您可以根据设置将css过滤器分配给.owl-carousel .center img或.owl-carousel .center。

Answer 2

您会看到活动元素将附加active类。您可以使用此CSS

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

由于您有3个项目，因此第二个孩子将始终为灰度级。

Answer 3

我以这种方式解决了这个问题 CSS：

N

JS（中心：真是关键）：

.owl-item.center img{
  -webkit-filter: none; 
   filter: none;
 }

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