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

Question

レスポンシブのスライドショーを作成しています。
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>

試したこと

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

Answer 1

imgに何らかのラップを掛けるとよいのでは？

<style>
span.wrap:not(.active)::before{
content:"";
width:100px;
height:100px;
  background-Color:rgba(0,0,0,0.7);
  display:inline-block;
  position:absolute;  
}
</style>
<span class="wrap"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=1"></span>
<span class="wrap"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=2"></span>
<span class="wrap active"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=3"></span>
<span class="wrap"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=4"></span>
<span class="wrap"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=5"></span>

Comments

[tt_360]

ありがとうございます(T_T)
やってみたのですが、黒のフィルターかかりました！
サイズを指定しなくてはならなくて、レスポンシブサイズが良いのでwidth:100%;height:100%;としてみました。
1つ問題があって、真ん中だけ黒フィルターをつけたくないのですがそういった場合どうすれば良いでしょうか？

.slick-slide:not(.slick-center) span.wrap:not(.active)::before{
content:"";
width:100%;
height:98%;
background-Color:rgba(0,0,0,0.7);
display:inline-block;
position:absolute;
}

このようにしたら真ん中の黒フィルターはかからなくなったのですが、スライドする時に黒が残ってしまって変な感じになってしまいます。

他に良い方法はないでしょうか？

初歩的で何度もほんと申し訳ないですm(_ _)m教えてください。

Answer 2

いろいろ試したみた結果

.slider .slick-slide:not(.slick-center) {
-webkit-filter: brightness(60%);
-moz-filter: brightness(60%);
-o-filter: brightness(60%);
-ms-filter: brightness(60%);
filter: brightness(60%);
transition: 0.3s ease-in 0s;

とすることで簡単に解決できました！