Swiper.jsが機能しない

CDNを用いたSwiper.jsが機能しません(ダウンロードしローカルにファイルを置いても機能しないです・・・)

使用エディターはVScode
動作確認はHTMLファイルをgoogle chromeで開く or VScode拡張機能の「Live Server」で確認しました。

なおこちらの環境でページを確認した際の表示は以下の画像のようになっていました。
見ての通りページネーションも表示されてません。

左右ボタンは押しても反応せず、中央divをクリックし左右に動かすこともできません。

CDNやローカルへのダウンロード、配置場所の変更など色々試しましたが改善できませんでした・・・

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
8      rel="stylesheet"
9      href="https://unpkg.com/swiper/swiper-bundle.min.css"
10    />
11    <link rel="stylesheet" href="test.css" />
12    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
13    <script src="test.js"></script>
14    <title>Document</title>
15  </head>
16  <body>
17    <!-- Slider main container -->
18    <div class="swiper-container">
19      <!-- Additional required wrapper -->
20      <div class="swiper-wrapper">
21        <!-- Slides -->
22        <div class="swiper-slide">Slide 1</div>
23        <div class="swiper-slide">Slide 2</div>
24        <div class="swiper-slide">Slide 3</div>
25        ...
26      </div>
27      <!-- If we need pagination -->
28      <div class="swiper-pagination"></div>
29
30      <!-- If we need navigation buttons -->
31      <div class="swiper-button-prev"></div>
32      <div class="swiper-button-next"></div>
33    </div>
34  </body>
35</html>
36

CSS
1.swiper-container {
2  max-width: 1000px;
3  height: 300px;
4  margin: 0 auto;
5  background-color: gray;
6}
7
8.swiper-slide {
9  display: flex;
10  justify-content: center;
11  align-items: center;
12}
13

javascript
1const swiper = new Swiper(".swiper-container", {
2  // Optional parameters
3  direction: "vertical",
4  loop: true,
5
6  // If we need pagination
7  pagination: {
8    el: ".swiper-pagination",
9  },
10
11  // Navigation arrows
12  navigation: {
13    nextEl: ".swiper-button-next",
14    prevEl: ".swiper-button-prev",
15  },
16});
17