Swiperとモーダルウィンドゥの組み合わせでクリックしたボタンに応じて表示するスライダーを変更したい

やりたいこと

ボタン1を押すとモーダルウィンドウ上のAスライダーが表示
ボタン2を押すとモーダルウィンドウ上のBスライダーが表示
ボタン3を押すとモーダルウィンドウ上のCスライダーが表示

解決したいこと

モーダルウィンドゥ自体とSwiper自体は動作していてモーダルウィンドゥのスクリプトを切った状態だとボタンを押すと目的のスライダーに変わるが、モーダルウィンドゥを組み合わせるとslideToLoopが機能しない。

1日調べて悩みましたが解決しなかったので質問させていただきました。
宜しくおねがいします。

html
1 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
2
3<p class="btn_a btn01">ボタン1</p>
4<p class="btn_b btn01">ボタン2</p>
5<p class="btn_c btn01">ボタン3</p>
6   
7  <div id="modal-main">
8		<div id="slider_sample01" class="slider_wrap">
9			<div class="swiper-container">
10				<div class="swiper-wrapper">
11					<div class="swiper-slide">
12						<img src="http://placehold.jp/1000x300.png" alt="Aスライダー">
13					</div>
14					<div class="swiper-slide">
15							<img src="http://placehold.jp/1000x500.png" alt="Bスライダー">
16					</div>
17					<div class="swiper-slide">
18							<img src="http://placehold.jp/1000x800.png" alt="Cスライダー">
19					</div>
20				</div>
21			</div>
22			<div class="swiper-button-prev btn_left01"></div>
23			<div class="swiper-button-next btn_right01"></div>
24		</div>
25		<!-- /.slider_sample01 -->
26	</div>
27  
28  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
29    <script>
30  	$(document).ready(function() {
31		//			モーダルウィンドウ
32		//テキストリンクをクリックしたら
33		$(".btn01").click(function() {
34			//body内の最後に<div id="modal-bg"></div>を挿入
35			$("body").append('<div id="modal-bg"></div>');
36
37			let slider_count = $('.swiper-slide').length;
38			var mySwiper = new Swiper('.swiper-container', {
39				loop: true,
40				speed: 500,
41				navigation: {
42					nextEl: '.swiper-button-next',
43					prevEl: '.swiper-button-prev',
44				}
45			})
46			realIndex = this.realIndex;
47			slideClass = jQuery('.swiper-slide-' + realIndex);
48			
49			var swiper01 = new Swiper('#slider_sample01 .swiper-container', {
50				navigation: {
51					prevEl: '.btn_left01',
52					nextEl: '.btn_right01',
53				},
54				autoHeight: true,
55				roundLengths: true,
56				loop: true,
57				on: {
58					slideChange: function() {
59						let slider_num = this.realIndex;
60						if (slider_num === 0) {
61							$('.btn_left01').text('Cスライダー');
62							$('.btn_right01').text('Bスライダー');
63						} else if (slider_num === 1) {
64							$('.btn_left01').text('Aスライダー');
65							$('.btn_right01').text('Cスライダー');
66						} else if (slider_num === 2) {
67							$('.btn_left01').text('Bスライダー');
68							$('.btn_right01').text('Aスライダー');
69						}
70					}
71				}
72			});
73			$('.btn_a').click(function() {
74				swiper01.slideToLoop(0);
75			});
76			$('.btn_b').click(function() {
77				swiper01.slideToLoop(1);
78			});
79			$('.btn_c').click(function() {
80				swiper01.slideToLoop(2);
81			});
82			
83			
84			//画面中央を計算する関数を実行
85			modalResize();
86			//モーダルウィンドウを表示
87			$("#modal-bg,#modal-main").fadeIn("slow");
88			$("#modal-bg,#btn_close").click(function() {
89				$("#btn_close,#modal-bg,#modal-main").fadeOut("slow", function() {
90					$('#modal-bg').remove();
91				});
92
93			});
94
95		$(window).resize(modalResize);
96		function modalResize() {
97			var w = $(window).width();
98			var h = $(window).height();
99
100			var cw = $("#modal-main").outerWidth();
101			var ch = $("#modal-main").outerHeight();
102			$("#modal-main").css({
103				"left": ((w - cw) / 2) + "px",
104				"top": ((h - ch) / 8) + "px"
105			});
106		}
107			
108		});
109		});
110    </script>

css
1body {
2  background: #ffffff;
3  padding: 20px;
4  font-family: Helvetica;
5  position: relative;
6}
7
8
9/* モーダル コンテンツエリア */
10#modal-main {
11  display: none;
12  margin: 0;
13  padding: 0;
14  position: absolute;
15  z-index: 2;
16}
17
18/* モーダル 背景エリア */
19#modal-bg {
20  width: 100%;
21  height: 100%;
22  background-color: rgba(0, 0, 0, 0.5);
23  position: fixed;
24  top: 0;
25  left: 0;
26  z-index: 0;
27}
28
29
30
31.slider_wrap {
32  position: absolute;
33  width: 1140px;
34  margin: 0 auto;
35  left: 50%;
36  margin-left: -570px;
37  top: 0;
38  z-index: 100;
39}
40
41.btn01:hover {
42  cursor: pointer;
43}
44
45コード