slickで意図しない空白ができてしまう

Bracketsにてhtmlページ作成を行っているのですが、Slickにてスライドショーを使用しようとしたところ、メイン画像とサムネイルスライダーの間に、意図しない隙間が出来てしまうことが判明し、原因を探すためコードも最小限にしたのですが、それでも原因がわかりませんでした。

Bracketsで作成、プレビューしたものは隙間が出来てしまうのですが(ネット上にアップロードしても同じでした)、同じhtmlコード、JSコードをcodepenで試したところ、そちらでは隙間ができません。
一体何が原因かわからず困っています。
原因を教えていただけますと幸いです。

1枚めが空白が無い状態、2枚目が空白が出来てしまう状態(1枚目では表示されているNextボタンが画像外まで出てしまっています)です。

該当のソースコード

html
1<html lang="ja">
2<head>
3<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
4</head>
5<body>
6  <ul class="gallery">
7    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/01.jpg" alt=""></li>
8    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/02.jpg" alt=""></li>
9    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/03.jpg" alt=""></li>
10    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/04.jpg" alt=""></li>
11    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/05.jpg" alt=""></li>
12    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/06.jpg" alt=""></li>
13    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/07.jpg" alt=""></li>
14    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/08.jpg" alt=""></li>
15  </ul>
16  <ul class="choice-btn">
17    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/01.jpg" alt=""></li>
18    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/02.jpg" alt=""></li>
19    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/03.jpg" alt=""></li>
20    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/04.jpg" alt=""></li>
21    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/05.jpg" alt=""></li>
22    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/06.jpg" alt=""></li>
23    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/07.jpg" alt=""></li>
24    <li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-5/img/08.jpg" alt=""></li>
25     </ul>
26<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
27<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
28<script src="../js/6-2-5.js"></script>
29</body>
30</html>

javascript
1//上部画像の設定
2$('.gallery').slick({
3
4});
5
6//選択画像の設定
7$('.choice-btn').slick({
8
9});

参考画像

1枚目

2枚目

Cocode

2022/12/24 17:33 編集

コードはコードブロックの中に記載するようにお願いしますm(_ _)m 見にくいだけでなく、必要な記号類が消えてしまう可能性もあります。 ```html （ここにhtmlをかく） ``` ```css （ここにcssをかく） ``` ```javascript （ここにJavaScriptやjQueryをかく） ```