slick.jsで非アクティブ画像を薄くする

はじめに

slick.jsを使ってカルーセルスライダーを実装した際に、
左右の画像を薄くしたいと思ったのですが、
調べてみた限りそういったオプションがないようなので、
CSSとHTMLで実装する方法をめもめも。

コード

.slider-group {
  position: relative;
}
.slider-filter-right,
.slider-filter-left {
  z-index: 1;
  background: #fff;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
  -moz-opacity:0.8;
  -khtml-opacity: 0.8;
  opacity:0.8;
  zoom:1;
  position: absolute;;
  top: 0;
  height: <スライダー縦幅>;
  width: calc((100vw - <スライダー横幅>) / 2);
}
.slider-filter-right {
  left: 0;
}
.slider-filter-left {
  right: 0;
}

<div class="slider-group">
  <div class="slider-filter-left"></div>
  <div class="slider-filter-right"></div>
  <div id="slider-list">
    <div class="slider-list-item">
      hoge01
    </div>
    <div class="slider-list-item">
      hoge02
    </div>
    <div class="slider-list-item">
      hoge03
    </div>
  </div>
</div>

デモ