CSSで作った複数のタブの中でswiper.jsを全て動かしたい

前提・実現したいこと

cssで作成したタブ（3つ）の中でswiper.jsにて作成したスライダーを動かしたい。動きはそれぞれ同じで問題ない。

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

1つめのタブではスライダー・ページネーションと共に動くものの、2つめ3つめのタブでは画像だけしか出ずスライダー・ページネーション共に起動しない

該当のソースコード

slider.php
1  <div class="tab">
2    <input name="tabs" type="radio" id="tab-1" checked="checked" class="input">
3    <label for="tab-1" class="tab-label">VISIONARY<br>定員6名</label>
4    <div class="tab-panel">
5      <div class="swiper-container ">
6        <!-- Sliderのラッパー(各スライドを内包する箱みたいなイメージ) -->
7        <div class="swiper-wrapper">
8          <!-- Slideさせたいコンテンツ -->
9          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
10          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
11          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
12        </div>
13        <!-- ページネーション（※省略可） -->
14        <div class="swiper-pagination"></div>
15      </div>
16
17    </div>
18    <input name="tabs" type="radio" id="tab-2" class="input">
19    <label for="tab-2" class="tab-label">TIMELESS<br>定員11名</label>
20    <div class="tab-panel">
21      <div class="swiper-container">
22        <!-- Sliderのラッパー(各スライドを内包する箱みたいなイメージ) -->
23        <div class="swiper-wrapper">
24          <!-- Slideさせたいコンテンツ -->
25          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
26          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
27          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
28        </div>
29        <!-- ページネーション（※省略可） -->
30        <div class="swiper-pagination"></div>
31
32      </div>
33
34    </div>
35    <input name="tabs" type="radio" id="tab-3" class="input">
36    <label for="tab-3" class="tab-label">SILENT<br>定員6名</label>
37    <div class="tab-panel">
38      <div class="swiper-container slider2">
39        <!-- Sliderのラッパー(各スライドを内包する箱みたいなイメージ) -->
40        <div class="swiper-wrapper">
41          <!-- Slideさせたいコンテンツ -->
42          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
43          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
44          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
45        </div>
46        <!-- ページネーション（※省略可） -->
47        <div class="swiper-pagination"></div>
48
49      </div>
50
51    </div>
52  </div>

slider.sccss
1長いためGitHubで掲載します。
2[slider Git](https://github.com/seripoyo/slider.git)

script.js
1var swiper = new Swiper('.swiper-container', {
2    pagination: {
3      el: '.swiper-pagination',
4        clickable: true,
5    },
6  loop: true,
7  speed: 3000,
8      autoplay: {
9      disableOnInteraction: true,
10  },
11          navigation: {
12        nextEl: '.swiper-button-next',
13        prevEl: '.swiper-button-prev',
14    },
15
16});

試したこと

.swiper-containerとついているクラスとは別にslider1,2,3を作成しそれぞれに対してスクリプトを記載→変化なし

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

前提・実現したいこと

cssで作成したタブ（3つ）の中でswiper.jsにて作成したスライダーを動かしたい。動きはそれぞれ同じで問題ない。

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

1つめのタブではスライダー・ページネーションと共に動くものの、2つめ3つめのタブでは画像だけしか出ずスライダー・ページネーション共に起動しない

該当のソースコード

slider.php
1  <div class="tab">
2    <input name="tabs" type="radio" id="tab-1" checked="checked" class="input">
3    <label for="tab-1" class="tab-label">VISIONARY<br>定員6名</label>
4    <div class="tab-panel">
5      <div class="swiper-container slider1">
6        <!-- Sliderのラッパー(各スライドを内包する箱みたいなイメージ) -->
7        <div class="swiper-wrapper">
8          <!-- Slideさせたいコンテンツ -->
9          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
10          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
11          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
12        </div>
13        <!-- ページネーション（※省略可） -->
14        <div class="swiper-pagination"></div>
15      </div>
16
17    </div>
18    <input name="tabs" type="radio" id="tab-2" class="input">
19    <label for="tab-2" class="tab-label">TIMELESS<br>定員11名</label>
20    <div class="tab-panel">
21      <div class="swiper-container slider2">
22        <!-- Sliderのラッパー(各スライドを内包する箱みたいなイメージ) -->
23        <div class="swiper-wrapper">
24          <!-- Slideさせたいコンテンツ -->
25          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
26          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
27          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
28        </div>
29        <!-- ページネーション（※省略可） -->
30        <div class="swiper-pagination"></div>
31
32      </div>
33
34    </div>
35    <input name="tabs" type="radio" id="tab-3" class="input">
36    <label for="tab-3" class="tab-label">SILENT<br>定員6名</label>
37    <div class="tab-panel">
38      <div class="swiper-container slider3">
39        <!-- Sliderのラッパー(各スライドを内包する箱みたいなイメージ) -->
40        <div class="swiper-wrapper">
41          <!-- Slideさせたいコンテンツ -->
42          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
43          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
44          <div class="swiper-slide"><img alt="画像3" src="<?php echo get_template_directory_uri(); ?>/img/visionary.png" /></div>
45        </div>
46        <!-- ページネーション（※省略可） -->
47        <div class="swiper-pagination"></div>
48
49      </div>
50
51    </div>
52  </div>

slider.sccss
1/*tabの全体枠*/
2.tab {
3  display: flex;
4  flex-wrap: wrap;
5  width: 100%;
6  background: white;
7  justify-content: center;
8  /*inputを非表示にする*/
9  .input {
10    position: absolute;
11    opacity: 0;
12  } /*tabボタン部分*/
13  .tab-label {
14    position: relative;
15    width: 20%;
16    height: 100px;
17    background: #e5e5e5;
18    cursor: pointer;
19    font-weight: bold;
20    font-size: 18px;
21    color: #7f7f7f;
22    transition: background 0.1s, color 0.1s;
23    margin-right: 10px;
24    display: flex;
25    align-items: center;
26    justify-content: center;
27    padding-left: 15px;
28
29    &:first-of-type {
30      border-top: 7px solid #c4804a;
31      margin-left: 180px;
32      &:before {
33        content: url(../img/font/maboroshi.png);
34        position: absolute;
35        top: 20%;
36        left: 25%;
37      }
38      &:active {
39        background: #c4804a;
40      }
41    }
42    &:nth-of-type(2n) {
43      border-top: 7px solid #1a5e6e;
44      &:before {
45        content: url(../img/font/toki.png);
46        position: absolute;
47        top: 20%;
48        left: 25%;
49      }
50      &:active {
51        background: #1a5e6e;
52      }
53    }
54    &:last-of-type {
55      margin-right: 180px;
56      border-top: 7px solid #346444;
57      &:before {
58        content: url(../img/font/oto.png);
59        position: absolute;
60        top: 20%;
61        left: 25%;
62      }
63      &:active {
64        background: #346444;
65      }
66    }
67    &:hover {
68      background: #d8d8d8;
69    }
70  }
71  .input:checked + .tab-label {
72    color: white;
73    &:before {
74      filter: invert(100%);
75    }
76    &:first-of-type {
77      background: #c4804a;
78    }
79    &:nth-of-type(2n) {
80      background: #1a5e6e;
81    }
82    &:last-of-type {
83      background: #346444;
84    }
85  }
86  /*tabの本文エリア*/
87  .tab-panel {
88    display: none;
89    padding: 30px 0 30px;
90    background: #c4804a;
91    order: 50;
92    .slide-text {
93      color: white;
94      &:first-of-type {
95        margin-top: 15px;
96      }
97    }
98  }
99  .input:checked + .tab-label + .tab-panel {
100    display: block;
101    &:first-of-type {
102      background: #c4804a;    }
103    &:nth-of-type(2n) {
104      background: #1a5e6e;
105    }
106    &:last-of-type {
107      background: #346444;
108    }
109  }
110}
111.swiper-container {
112  position: relative;
113  .swiper-slide {
114    width: 100% !important;
115    margin: 0 auto;
116
117    img {
118      width: 100%;
119      height: 800px;
120    }
121  }
122  .swiper-pagination {
123    position: absolute;
124  }
125}

script.js
1let slider1 = new Swiper ('.slider1', {
2   //各種設定
3loop: true,
4  speed: 3000,
5      autoplay: {
6      disableOnInteraction: true,
7  },
8    pagination: {
9      el: ".swiper-pagination",
10              clickable: true,
11    },
12});
13let slider2 = new Swiper ('.slider2', {
14   //各種設定
15loop: true,
16  speed: 3000,
17      autoplay: {
18      disableOnInteraction: true,
19  },
20    pagination: {
21      el: ".swiper-pagination-2",
22              clickable: true,
23    },
24});
25let slider3 = new Swiper ('.slider3', {
26   //各種設定
27loop: true,
28  speed: 3000,
29      autoplay: {
30      disableOnInteraction: true,
31  },
32    pagination: {
33      el: ".swiper-pagination-3",
34              clickable: true,
35    },
36});