title: in slick slideshow, just want center slide to be active
body: <p>I'm using the slick.js plugin to create a slideshow. There is no navigation strip of thumbnails.</p>
  
  <p>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.</p>
  
  <p>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). </p>
  
  <p>Does anyone know how to append the slide-active class just to the center slide please?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="slick_slideshow1"&gt;
    &lt;div&gt;
      &lt;img src="img/slideshow1/slide1.jpg"  /&gt;
  
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="img/slideshow1/slide2.jpg"  /&gt;
  
    &lt;/div&gt;
   &lt;div&gt;
      &lt;img src="img/slideshow1/slide3.jpg"  /&gt;
  
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="img/slideshow1/slide4.jpg"  /&gt;
  
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="img/slideshow1/slide5.jpg"  /&gt;
  
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="img/slideshow1/slide6.jpg" /&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css: (added into the slick.css file)</p>
  
  <pre><code> .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%);
  }
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('.slick_slideshow1').slick({
      'accessibility': 'true',
      'adaptiveHeight': 'true',
      'centerMode': 'true',
      'centerPadding': '0px',
      'slidesPerRow': '3',
      'slidesToShow': '3'
  
    });
  </code></pre>