在流畅的幻灯片中，只希望中心幻灯片处于活动状态

Question

我正在使用slick.js插件创建幻灯片。没有缩略图导航条。

我在任何时候都有三张幻灯片。我希望中间的幻灯片明亮，但两边的幻灯片都要变暗。

我原以为这样做的方法是为.slide活动类设置样式，但这个类似乎被附加到幻灯片中的每一张幻灯片上（显然是一个bug）。

有人知道如何将幻灯片活动类附加到中心幻灯片上吗？

html:

<div class="slick_slideshow1">
  <div>
    <img src="img/slideshow1/slide1.jpg"  />
  </div>
  <div>
    <img src="img/slideshow1/slide2.jpg"  />
  </div>
 <div>
    <img src="img/slideshow1/slide3.jpg"  />
  </div>
  <div>
    <img src="img/slideshow1/slide4.jpg"  />
  </div>
  <div>
    <img src="img/slideshow1/slide5.jpg"  />
  </div>
  <div>
    <img src="img/slideshow1/slide6.jpg" />
  </div>
</div>

css：（添加到slick.css文件中）

 .slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    filter: brightness(30%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
    -webkit-filter: brightness(30%);
    -moz-filter: brightness(30%);
}

jquery:

$('.slick_slideshow1').slick({
    'accessibility': 'true',
    'adaptiveHeight': 'true',
    'centerMode': 'true',
    'centerPadding': '0px',
    'slidesPerRow': '3',
    'slidesToShow': '3'
  });

Answer 1

问题是我在属性及其值周围打了勾号。当我移除它们时：

 $('.slick_slideshow1').slick({
    accessibility: true,
    adaptiveHeight: true,
    centerMode: true,
    centerPadding: '0px',
    slidesPerRow: 3,
    slidesToShow: 3
    });

然后，我可以通过设计.光滑的中心类：来设计中心幻灯片

    .slick-center  {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
 }