【Slick】左右に見える画像に墨かけをしたい

現在スライダーのslickを導入してのページを作っているのですが、下記画像の様に、左右に見える画像に墨かけをしたく考えています。

他の方の質問で、網掛けをするというものがあったのですが、回答のやりとりの工程に理解が追いつけず、参照できませんでした。
https://teratail.com/questions/88589

どなたか御知恵をお貸しいただけませんでしょうか？お願いいたします。

html
1            <div id="menu">
2            		<ul class="menucontent">
3			            <li>
4                            <div class="slider_sc1pic">
5                            		<img src="img/slider/ebi-trapanese.jpg" width="100%" height="auto" style="">
6                        	</div>
7							<div class="slider_sc1txt">
8                            	<h1></h1>
9                                <h2></h2>
10                                <a href="#">詳しくはコチラ</a>
11                            </div>
12                      </li>
13						<li>
14                        	<div class="slider_sc2pic">
15                            		<img src="img/slider/agnello-asparagi.jpg" width="100%" height="auto">
16                        	</div>
17                        	<div class="slider_sc2txt">
18                            	<h1></h1>
19                                <h2></h2>
20                                <a href="#">詳しくはコチラ</a>
21                            </div>
22						</li>
23                        <li>
24                        	<div class="slider_sc3pic">
25                            		<img src="img/slider/bruno-martins-442161-unsplash.jpg" width="100%" height="auto">
26                        	</div>
27                        	<div class="slider_sc3txt">
28                            	<h1></h1>
29                                <h2>B</h2>
30                                <a href="#"></a>
31</li>
32	                </ul>
33                </div>
34             </div>
35
36
37<script src="js/slick.js"></script>
38<script>
39$('.menucontent').slick({
40	accessibility	: true,
41	arrow : true,
42    autoplay: true,
43	infinite: true,
44	draggable: true,
45	touchMove: true,
46    centerMode:true,
47	variableWidth:true,
48	autoplaySpeed:10000,
49	prevArrow: '<img src="img/prev_arrow.svg" button class="slide-arrow prev-arrow"></button>',
50    nextArrow: '<img src="img/next_arrow.svg" button class="slide-arrow next-arrow"></button>',
51	responsive:[{
52			breakpoint: 1920,settings: { //601px～1024pxでは3画像表示
53				slidesToShow: 1,
54				slidesToScroll: 1,
55				centerPadding: '15%',
56		}
57		},
58		{
59			breakpoint: 1280,settings: { //481px～600pxでは2画像表示
60				slidesToShow: 1,
61				slidesToScroll: 1,
62				centerPadding: '20%',
63			}
64		},
65		{
66			breakpoint: 600,settings: { //481px～600pxでは2画像表示
67				slidesToShow: 1,
68				slidesToScroll: 1,
69				centerPadding: '20%',
70			}
71		},
72		{
73			breakpoint: 480,settings: {//480px以下では1画像表示
74				slidesToShow: 1,
75				slidesToScroll: 1,
76				centerPadding: '15%',
77		}
78		}]
79});
80</script>
81
82
83

行動規範の内容に同意します

回答1件

ベストアンサー

中央の要素に.slick-centerクラスが付く（全体には.slick-slideが付く）ので、それを利用して処理すればよいです。

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

ちなみにslick はul/li要素での利用を想定されていないため、HTMLの文法的におかしな構造になるのでdiv要素で処理するほうがよいと思います。

投稿2019/03/10 18:58

kei344

総合スコア69625

hisakiitou

2019/03/11 01:37

返信遅れました。お忙しい中ご返答頂きありがとうございます。 .slick-centerがつく、という事が初めて知りました。その上で、質問の中に入れた網掛けの方のやり方で試したところ、うまくいきました！ありがとうございます！！ bxsliderを使っていた名残から、<li>で構成していました。<div>に書き換え直しも致しました。細かくご指摘いただきありがとうございます！

行動規範の内容に同意します