更改猫头鹰轮播图像的颜色答案

【问题标题】：Change color of a owl-carousel image更改猫头鹰轮播图像的颜色
【发布时间】：2020-02-08 00:44:43
【问题描述】：

我在 owl-carousel 滑块中有 3 张图片，并且使用过

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

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

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

【问题讨论】：

标签： css colors slider owl-carousel grayscale

【解决方案1】：

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

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

当您像这样配置轮播时，中心的项目被分配类center。

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

【讨论】：

【解决方案2】：

您可以看到活动元素将附加active 类。你可以使用这个 CSS

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

由于您有 3 个项目，第二个孩子将始终是灰度。

【讨论】：

【解决方案3】：

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

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

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

JS（中心：true是关键）：

 var owl = $('.main');
      owl.owlCarousel({
        margin: 0,
        center:true,
        nav: true,
        loop: true,
        items: 1,
        dots: true,
        autoplay:true,
        autoplayTimeout:1500,
        autoplayHoverPause:true
      });

【讨论】：