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

Question

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

我随时放映三张幻灯片。我想让中间的幻灯片变亮，两边的幻灯片变暗

我认为实现此目的的方法是设置 .slide-active class 的样式，但似乎此 class 已附加到幻灯片中的每张幻灯片（显然是一个错误） .

有谁知道如何将活动幻灯片 class 附加到中心幻灯片？

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 class:

的样式来设置中心幻灯片的样式

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

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

in slick slideshow, just want center slide to be active

jquery

css

slick.js