slickで中央の画像の左右に余白をつけたい

前提・実現したいこと

slickを使いスライダーを製作しています。
中央の画像の左右に余白をつけたくて、
centerMode:true,　とし、

.slick-center{
margin-right:20px;
margin-left:20px;
}
としたところ、左右の画像の横幅が変わってしまいます。
また、スライダー下に余白ができてしまいます。
対処法を教えていただきたいです。よろしくお願いいたします。

###画像

発生している問題・エラーメッセージ

・左右の画像の横幅が変わる
・スライダー下に余白ができる

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="css/slick.css">
6    <link rel="stylesheet" href="css/slick-theme.css">
7    <link rel="stylesheet" href="css/stylesheet.css">
8    <title></title>
9  </head>
10
11  <body>
12  <div class="slider">
13    <div><a href="#"><img src="img/red.png"></a></div>
14    <div><a href="#"><img src="img/blue.png"></a></div>
15    <div><a href="#"><img src="img/yellow.png"></a></div>
16    <div><a href="#"><img src="img/green.png"></a></div>
17    <div><a href="#"><img src="img/pink.png"></a></div>
18    <div><a href="#"><img src="img/purple.png"></a></div>
19  </div>
20
21    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
22    <script type="text/javascript" src="js/slick.min.js"></script>
23    <script type="text/javascript" src="js/slick.js"></script>
24    <script src="js/script.js"></script>
25
26  </body>
27  </html>

css
1*{
2  padding:0;
3  margin:0;
4}
5
6.slider {
7  width: 100%;
8  margin: 0 auto;
9}
10
11.slider img{
12  height: auto;
13  width: 100%;
14  border-radius: 8px;
15}
16
17.slick-center{
18  margin-right:20px;
19  margin-left:20px;
20}

js
1$(function() {
2  $('.slider').slick({
3    autoplay:true,
4    autoplaySpeed:5000,
5    centerMode:true,
6    centerPadding:'20%',
7    arrows: false
8  });
9});

補足情報（FW/ツールのバージョンなど）

slick-1.8.1

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

回答1件

ベストアンサー

variableWidth: true,を追加すれば正しく表示されます。

js
1$(function() {
2  $(".slider").slick({
3    autoplay: true,
4    autoplaySpeed: 5000,
5    centerMode: true,
6    centerPadding: "20%",
7    variableWidth: true,
8    arrows: false
9  });
10});