スライドショーを作成で左右を黒でフィルターをかけたい

レスポンシブのスライドショーを作成しています。
3つの写真を並べて真ん中だけを目立たせるように、左右を黒でフィルターをかけたいのですがうまくいきません。
初歩的な質問になってしまうかもしれませんが初心者なので細かく教えて下さいm(__)m

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"> <!-------------------------------------------------------------------------------------> <!--------------------jQuery-----------------------------------------------------------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-------------------------------------------------------------------------------------> <!--------------------スライダー動かすやつ-----------------------------------------------> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <!-------------------------------------------------------------------------------------> <div class="sec_inner"> <div class="slider"> <div><img src="img/main_i01.jpg" alt=""></div> <div><img src="img/main_i02.jpg" alt=""></div> <div><img src="img/main_i03.jpg" alt=""></div> <div><img src="img/main_i04.jpg" alt=""></div> <div><img src="img/main_i05.jpg" alt=""></div> </div> </div>

CSS

/*--スライダーの位置とサイズ調整--*/ .slider{ width:100%; margin:0 auto; } .slider div img{ width:100%; } /*--------画像サイズ調整---------*/ /*左右画像表示ここから*/ .slick-slide{ height:auto!important; margin-right: 0vw!important; margin-left: 0vw!important; } .slider .slick-slide:not(.slick-center) { -webkit-filter: opacity(50%); -moz-filter: opacity(50%); -o-filter: opacity(50%); -ms-filter: opacity(50%); filter: opacity(50%); transition: 0.3s ease 0s; } /*左右画像表示ここまで*/ /*下サムネイル画像ここから*/ .sec_inner{ width:100%; margin:0 auto; } /*下サムネイル画像ここまで*/ /*矢印表示ここから*/ .slick-next{ right:68%!important; } .slick-prev{ left:68%!important; } .slick-arrow{ z-index:2!important; } .slick-arrow:before{ content:""!important; } .slick-arrow:before{ content:""!important; width: 100%!important; height: 100%!important; position: absolute; top: 0; left: 0; } .slick-next:before{ background: url(img/arrow_r.png) no-repeat!important; background-size: contain!important; } .slick-prev:before{ background: url(img/arrow_l.png) no-repeat!important; background-size: contain!important; } .slick-arrow{ z-index:2!important; width:30px!important; height:30px!important; } 　.slick-next{ right:-30px!important; } 　.slick-prev{ left:-30px!important; } .slick-arrow:before{ opacity:1!important; }

javascript

<script> $('.slider').slick({ autoplay: true, //自動再生 autoplaySpeed: 2800, //自動再生のスピード speed: 2000, //スライドするスピード dots: true, //スライドしたのドット arrows: true, //左右の矢印 infinite: true, //スライドのループ pauseOnHover: false, //ホバーしたときにスライドを一時停止しない /*----両サイドを表示----*/ centerMode:true, centerPadding:"33.33333%", /*----------------------*/ }); </script>

試したこと

白の半透明なのはできたのですがこれを黒の半透明みたいにしたいです。