swiper.jsを使用して表示画像を連動させたい。

以前こちらでアドバイス頂いて画像の情報読み込み→表示はできたのですが
再度つまずいてしまいました。

swiper.jsを使用してスライダーを表示しています。
このスライダーの動きに合わせて

<div id="over_bgimg"></div>の場所に表示される画像を連動して切り替えたいです。

・スライダー(swiper.js)でリアルタイムにメインに表示されている画像はclass=swiper-slide-activeの中の画像。
・メインに表示されている画像が他に切り替わるとclass=swiper-slide-activeもその画像を囲んだdivクラスに変更される。
・上記の画像情報を読み込んで、id=over_bgimgへ表示させている。

⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼⁼ここまでは確認できています。

・スライダーが動いた時のイベントはslideChange: function () {}内に記載。
・スライダーの画像が切り替わってもid=over_bgimgの表示されいる画像が切り替わらない。

この表示画像をスライダーと連動させて切り替わるように表示させたいです。
記述のどこの箇所が間違っているのか分かりましたら、ご教授願えないでしょうか？

html
1<script src="https://unpkg.com/swiper/js/swiper.js"></script>
2
3<div class="swiper-container">
4<div class="swiper-wrapper">
5  <div class="swiper-slide">
6  <img id="get_bgimg" src="main03.jpg">
7  </div>
8  <div class="swiper-slide swiper-slide-prev">
9  <img id="get_bgimg" src="main02.jpg">
10  </div>
11  <div class="swiper-slide swiper-slide-active">
12  <img id="get_bgimg" src="main01.jpg">
13  </div>
14</div>
15</div>
16
17	
18<div id="over_bgimg"></div>

javascript
1	var swiper = new Swiper('.swiper-container', {
2        direction: 'vertical',
3		speed: 2000, 
4        slidesPerView: 1,
5        spaceBetween: 30,
6		effect: 'slide',
7        mousewheel: true,
8		keyboard: true,
9		
10		on: {
11		slideChange: function () { //スライドが動いた時のイベント
12		var getimg = document.getElementsByClassName('swiper-slide-active');
13		var img = getimg[0].querySelector('#get_bgimg');
14		var imgsrc = img.src;
15		var out =  imgsrc ;                                      
16		document.getElementById('over_bgimg').innerHTML = "<img src='" + out + "'>";	
17          },
18      }	
19		
20    });