slickスライダーがうまく動きません。

実現したいこと

slickスライダーを、見本ページのように動かしたい。

前提

slickスライダーを使って、スライダーを作ろうとしています。
jQueryや、slickをダウンロードして、リンクを作っています。

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

スライダーの形にはなっているのですが、少しスライドすると、動かなくなってしまいます。
画像間のmarginを開ける命令をしているのですが、反映されません。

ご回答よろしくお願いします。

追記
・少しスライドすると動かなくなる問題は、jQueryのasNavFor: '.slider-for',を削除することで動くようになりました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="css/style.css">
8    <link rel="stylesheet" href="css/slick.css">
9    <link rel="stylesheet" href="css/slick-theme.css">
10    <title>Document</title>
11</head>
12<body>
13    <header>
14        <div class="head-container">
15            <div class="logo"><img src="1\logo.svg" alt=""></div>
16            <div class="menu"><span></span><span></span><span></span></div>
17            
18        </div>
19        <nav class="menu-in">
20            <ul class="menu-in1">
21                <li><a href="#PICKUP">PICK UP</a></li>
22                <li><a href="">FEATURE</a></li>
23                <li><a href="">CONTACT</a></li>
24            </ul>
25            <ul class="menu-in2">
26                <li><a href="https://twitter.com/">Twitter</a></li>
27                <li><a href="https://www.facebook.com/">facebook</a></li>
28                <li><a href="https://www.instagram.com/">instagram</a></li>
29                
30            </ul>
31        </nav>
32        <div id="mask"></div>
33        
34    </header>
35    <section>
36        <div class="video">
37            <video src="1\video (1).mp4"></video>
38        </div>
39    </section>
40    <section>
41        <div class="title">
42           <h1 id="PICKUP">PICK UP</h1>
43        </div>
44        <div>
45            <ul class="slider">
46                <li><div class="inner"><img src="1\pickup1.jpg" alt=""></div></li>
47                <li><div class="inner"><img src="1\pickup2.jpg" alt=""></div></li>
48                <li><div class="inner"><img src="1\pickup3.jpg" alt=""></div></li>
49                <li><div class="inner"><img src="1\pickup4.jpg" alt=""></div></li>
50                <li><div class="inner"><img src="1\pickup5.jpg" alt=""></div></li>
51                <li><div class="inner"><img src="1\pickup6.jpg" alt=""></div></li>
52                <li><div class="inner"><img src="1\pickup7.jpg" alt=""></div></li>
53                <li><div class="inner"><img src="1\pickup8.jpg" alt=""></div></li>
54                <li><div class="inner"><img src="1\pickup9.jpg" alt=""></div></li>
55            </ul>
56        </div>
57    </section>
58
59    
60    <script
61    src="https://code.jquery.com/jquery-3.6.4.min.js"
62    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
63    crossorigin="anonymous"></script>
64    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
65    <script src="js/slick.min.js"></script>  
66    <script src="js/main.js"></script>  
67</body>
68</html>

CSS
1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6
7header {
8    width: 100%;
9    padding: 20px 40px;
10    margin: 0 auto;
11    position: relative;
12    position: fixed;
13    z-index: 10;
14}
15
16.head-container {
17    display: flex;
18    justify-content: space-between;
19    align-items: center;
20    
21}
22
23.menu {
24    width: 50px;
25    height: 50px;
26    position: relative;
27    z-index: 10;
28    
29}
30
31.menu span {
32    position: absolute;  
33    border: solid 1px black;
34    width: 50%;
35}
36
37.menu.is-active span {
38    position: absolute;
39    border: solid 1px white;
40    width: 50%;
41}
42
43span:nth-child(1){
44    transform: rotate(0deg);
45    top: 20px;
46    transition: 0.5s;
47}
48span:nth-child(2){
49    top: 30px;
50}
51span:nth-child(3){
52    transform: rotate(0deg);
53    top: 40px;
54    transition: 0.5s;
55}
56
57span.is-active:nth-child(1){
58    transform: rotate(315deg);
59    top:50%;
60    left: 0;
61    color: white;
62    transition: 0.5s;
63}
64span.is-active:nth-child(2){
65    opacity: 0;
66}
67span.is-active:nth-child(3){
68    transform: rotate(-315deg);
69    top:50%;
70    left: 0;
71    color: white;
72    transition: 0.5s;
73}
74
75.menu-in { 
76    display: block;
77    position: absolute;
78    top: 0;
79    left: -300px;
80    width: 300px;
81    height: 100vh;
82    z-index: 10;
83    background-color: black;
84    padding: 60px 25px 20px 25px;
85    text-align: left;
86    font-size: 0.9rem;
87    transition: all 0.5s;
88
89}
90
91.menu-in.is-active {
92    position: absolute;
93    top: 0;
94    left: 0;
95    width: 300px;
96    height: 100vh;
97    background-color: rgb(0, 0, 0);
98    z-index: 3;
99    transition: all 0.5s;
100    
101}
102
103.menu-in1 {
104    margin: 0 0 60px 0;
105}
106
107.menu-in1 li {
108    padding:  22px 0;
109    border-bottom: solid 1px white;
110}
111
112.menu-in1 li:nth-child(1){
113    border-top: solid 1px white;
114}
115
116.menu-in1.is-active li {
117    color: white;
118    padding: 30px;
119    margin: 0 auto;
120}
121
122.menu-in li {
123    list-style: none;
124    text-decoration: none;
125}
126
127.menu-in.is-active li a {
128    color: white;
129    list-style: none;
130    text-decoration: none
131}
132
133.menu-in2 li {
134    padding: 5px 0;
135}
136
137
138#mask {
139    display: none;
140    transition: all 0.5s;
141}
142
143#mask.is-active {
144    display: block;
145    position: fixed;
146    top: 0;
147    left: 0;
148    width: 100%;
149    height: 100%;
150    background-color:aqua;
151    opacity: 0.8;
152    
153}
154
155video {
156    padding: 80px 0 0 0 ;
157    z-index: 1;
158}
159
160.title {
161    text-align: center;
162    font-size: 24px;
163    padding: 80px 0 40px 0;
164
165}
166
167.slider {
168    width: auto;
169    height: auto;
170    justify-content: space-between;
171   
172
173}
174
175.inner { 
176    list-style: none;
177    margin: 50px;
178}

jQery
1$('.menu').click(function(){
2    $('.menu').toggleClass('is-active');
3    $('.menu span').toggleClass('is-active');
4    $('.menu-in').toggleClass('is-active');
5    $('#mask').toggleClass('is-active');
6});
7
8$('.menu-in a,#mask').click(function(){
9    $('.menu').toggleClass('is-active');
10    $('.menu span').toggleClass('is-active');
11    $('.menu-in').toggleClass('is-active');
12    $('#mask').toggleClass('is-active');
13});
14
15
16$('.slider').slick({
17    slidesToShow: 3,
18    slidesToScroll: 1,
19    asNavFor: '.slider-for',
20    
21    centerMode: true,
22    focusOnSelect: true
23  });
24