slickのcenterModeが効かない

実現したいこと

・slickで作成したスライダーの前後の画像を、centerModeで見せたい
・画像は全て特定のSVGパスでトリミングしている（窓型）
・現状画像は3枚のみ、今後増えていく予定
・スマートフォンは左右の画像が見切れた状態にしたいが、PCでは左右の画像が全て見えており、半透明になっている状態が理想

発生している問題・分からないこと

・現状のコードだとcenterModeを加筆しても左右の画像が表示されない
・要素の横幅が原因だと考えて色々なパターンを試しているが、解決していない

※スライダーアイテムにドロップシャドウをかけたいが、slickが動作すると子要素の幅が変わってしまいシャドウがトリミングされてしまう。こちらについても解決方法が分かる方いましたらご教示いただけますと幸いです。

恐れ入りますが、分かる方いましたら回答よろしくお願いいたします。

該当のソースコード

HTML
1<section class="section-slide">
2    <h2 data-title="midashi">見出し<span></span></h2>
3    <div class="slick container" id="js_slick">
4        <div class="slick item">
5            <div class="clip-shadow">
6                <img src="xxxx" alt="画像1枚目">
7            </div>
8            <svg class="svg">
9                <clipPath id="clip-path" clipPathUnits="objectBoundingBox"><path d="xxxx"></path></clipPath>
10              </svg>
11            <p>テキスト</p>
12        </div>
13        <div class="slick item">
14            <div class="clip-shadow">
15                <img src="xxxx" alt="画像2枚目">
16            </div>
17            <p>テキスト</p>
18        </div>
19        <div  class="slick item">
20            <div class="clip-shadow">
21                <img src="xxxx" alt="画像3枚目">
22            </div>
23            <p>テキスト</p>
24        </div>
25    </div>
26</section>

SCSS
1.section-slide{
2    /* スライド */
3    .slick{
4
5        &.container{
6            width: 64%;
7            margin: 0 auto;
8
9            @include pc {
10                width: 30%;
11            }
12        }
13
14        &.item{
15            margin-bottom: 2.0rem;
16        }
17
18            .clip-shadow {
19                filter:drop-shadow(0.5rem 0.4rem 0 rgba(0, 0, 0, 0.2));
20            }
21
22        svg {
23            position: absolute;
24            width: 0;
25            height: 0;
26        }
27
28        img {
29            width: 100%;
30            margin-bottom: 2.0rem;
31            -webkit-clip-path:url(#clip-path);
32            clip-path:url(#clip-path);
33        }
34
35        p {
36            display: block;
37            font-size: 2.4rem;
38            font-weight: 600;
39        }
40    }
41}

JS
1$('#js_slick').slick({
2  arrows: false,
3  dots: true,
4  infinite: true,
5  speed: 500,
6  autoplay: true,
7  autoplaySpeed: 5000,
8  fade: true,
9  cssEase: 'linear',
10  centerMode: true,
11  centerPadding:"20%"
12});