Slick.jsを使用して3枚の画像を自動再生、無限ループさせる挙動について

実現したいこと

実現したいこと：
ライブラリ「Slick.js」を使用して、3枚の画像を無限ループさせたいが、自動再生されない、かつ3枚目の画像が左側に表示されない問題を解消したい。

イメージ（参考にしたサイト）：
https://coco-factory.jp/ugokuweb/move01/6-1-7/

HTML
1<head>
2    <link
3      rel="stylesheet"
4      type="text/css"
5      href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
6    />
7    <link rel="stylesheet" href="./assets/css/common.css" />
8</head>
9
10<section class="slider_wrap">
11          <ul class="slider">
12            <li>
13              <img
14                src="./assets/img/1-1.jpg"
15                alt=""
16              />
17            </li>
18            <li>
19              <img
20                src="./assets/img/1-2.jpg"
21                alt=""
22              />
23            </li>
24            <li>
25              <img
26                src="./assets/img/1-3.jpg"
27                alt=""
28              />
29            </li>
30          </ul>
31        </section>
32
33<!-- 以下はbodyタグの手前に書いています -->
34<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
35<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
36<script src="./assets/js/common.js"></script>

SCSS（common.css）
1section {
2&.white_styling {
3      .slider {
4        width: 100%;
5        margin: 0 auto;
6
7        .slick-list {
8          &.draggable {
9            padding: 0 !important;
10          }
11        }
12
13        img {
14          width: 67.18vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
15          height: auto;
16        }
17
18        .slick-slide {
19          transform: scale(0.836); /*左右の画像のサイズを80%に*/
20          transition: all 0.5s; /*拡大や透過のアニメーションを0.5秒で行う*/
21          opacity: 0.5; /*透過50%*/
22
23          &.slick-center {
24            transform: scale(1); /*中央の画像のサイズだけ等倍に*/
25            opacity: 1; /*透過なし*/
26          }
27        }
28      }
29
30      // 矢印
31      .slick-prev,
32      .slick-next {
33        display: none;
34      }
35    }
36}

JavaScript
1//スライダー
2$('.slider').slick({
3  autoplay: true, //自動的に動き出すか。初期値はfalse。
4  infinite: true, //スライドをループさせるかどうか。初期値はtrue。
5  speed: 500, //スライドのスピード。初期値は300。
6  slidesToShow: 3, //スライドを画面に3枚見せる
7  slidesToScroll: 1, //1回のスクロールで1枚の写真を移動して見せる
8  // prevArrow: '<div class="slick-prev"></div>', //矢印部分PreviewのHTMLを変更
9  // nextArrow: '<div class="slick-next"></div>', //矢印部分NextのHTMLを変更
10  centerMode: true, //要素を中央ぞろえにする
11  variableWidth: true, //幅の違う画像の高さを揃えて表示
12  dots: false, //下部ドットナビゲーションの表示
13});

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

ライブラリ「Slick.js」を使用して、3枚の画像を無限ループさせたいが、どうすれば自動再生されるか、かつ3枚目の画像が左側に表示されるかがわからない。

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

試したこと：
・CDNファイルの読み込み位置が問題ないか、確認 → 問題なし
・jQueryが読み込まれているか確認 → 問題なし
・HTMLに記述しているクラス名と、CSSファイル、JSファイルに記述しているクラス名が一致しているかどうか確認 → 問題なし
・ドキュメントが完全に読み込まれてからSlickスライダーを初期化するよう、jsの記述を以下のように修正してみた → 変化なし

JavaScript
1$(document).ready(function(){
2  $('.slider').slick({
3    autoplay: true, //自動的に動き出すか。初期値はfalse。
4    infinite: true, //スライドをループさせるかどうか。初期値はtrue。
5    speed: 500, //スライドのスピード。初期値は300。
6    slidesToShow: 3, //スライドを画面に3枚見せる
7    slidesToScroll: 1, //1回のスクロールで1枚の写真を移動して見せる
8    // prevArrow: '<div class="slick-prev"></div>', //矢印部分PreviewのHTMLを変更
9    // nextArrow: '<div class="slick-next"></div>', //矢印部分NextのHTMLを変更
10    centerMode: true, //要素を中央ぞろえにする
11    variableWidth: true, //幅の違う画像の高さを揃えて表示
12    dots: false, //下部ドットナビゲーションの表示
13  });
14});