in slick slideshow, just want center slide to be active

Question

I'm using the slick.js plugin to create a slideshow. There is no navigation strip of thumbnails.

I have three slides showing at any given time. I want the slide in the middle to be bright, but the slides on either side of it to be darkened.

I thought the way to do this was to style the .slide-active class, but it seems that this class is appended to every slide in the slideshow (apparently, a bug).

Does anyone know how to append the slide-active class just to the center slide please?

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: (added into the slick.css file)

 .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

The problem was the tick marks I put around the properties and their values. When I removed them:

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

...I was then able to style the center slide by styling the .slick-center class:

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