更改owl-carousel图像的颜色

Question

我在一个owl-carousel滑块中有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来解决这个问题：

.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
      });