swiper.jsを実装しようとしたらスライドが何枚か表示されなくて困っています

###したいこと
全てのスライドが表示されている
###前提
jqueryは入っています
元々cdnを使って実装しようとしていましたが今と同じ状況になったので
直接ファイルをダウンロードすればどうにかなるかと試してみました

###困っていること
Githubでzipファイルをダウンロードして配置までしましたが
合計３枚のうちの1枚しか表示されません（枚数を増やした時は増やした分も表示がされません）
デベロッパーツールのconsoleにエラーメッセージは表示されません

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" type="text/css" href="css/swiper.minのコピー.css">
8    <link rel="stylesheet" type="text/css" href="css/style.css">
9</head>
10<body>
11    <header>
12    </header>
13    <main>
14        <!-- Slider main container -->
15        <div class="swiper-container">
16        <!-- Additional required wrapper -->
17            <div class="swiper-wrapper">
18                <!-- Slides -->
19                <div class="swiper-slide">Slide 1</div>
20                <div class="swiper-slide">Slide 2</div>
21                <div class="swiper-slide">Slide 3</div>
22                <div class="swiper-slide">Slide 4</div>
23                <div class="swiper-slide">Slide 5</div>
24            </div>
25            <!-- If we need pagination -->
26            <div class="swiper-pagination"></div>
27  
28            <!-- If we need navigation buttons -->
29            <div class="swiper-button-prev"></div>
30            <div class="swiper-button-next"></div>
31
32            <!-- If we need scrollbar -->
33          <div class="swiper-scrollbar"></div>
34        </div>
35
36    
37
38    </main>
39    <div id="dark-layer">
40    </div>
41    <footer>
42    </footer>
43    <script src="js/swiperのコピー.js"></script>
44    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
45    <script src="js/common.js"></script>
46</body>
47</html>

javascript
1const swiper = new Swiper('.swiper-container', {
2    // Optional parameters
3    direction: 'horizontal',
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      // And if we need scrollbar
18      scrollbar: {
19        el: '.swiper-scrollbar',
20      },
21});

試したこと

phpファイルのほうに直接書き込んでみましたが何も変わりませんでした

chromeのデベロッパーツールで見てみたところelementsに表示されているHTMLにはvisual studio codeに
自分で書いたコードじゃないものが混ざっていました(下記のHTMLの２行目と７行目)
ただ、この行を消しても更新をかけると新しく同じものができています

HTML
1<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1440px, 0px, 0px);">
2　　　　<div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 1440px;">Slide 3</div>
3       <!-- Slides -->
4       <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 1440px;">Slide 1</div>
5       <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 1440px;">Slide 2</div>
6       <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="2" style="width: 1440px;">Slide 3</div>
7                
8       <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 1440px;">Slide 1</div>
9</div>
10