複数設定したswiperのdestroy()が効かない（jquery使用)

#実現したいこと
同一ページ内に、複数のSwiperを設置したい。
その際にサムネイルのレイアウトを制御したいので、
インラインで記述されたstyle属性を削除したい。

#不具合
2個目のSwiperを設置すると、
style属性が削除されない。

#該当コード

html
1<div class="swiper-container list">
2<div class="swiper-wrapper">
3<div class="swiper-slide"><img src="1.jpg"></div>
4<div class="swiper-slide"><img src="2.jpg"></div>
5<div class="swiper-slide"><img src="3.jpg"></div>
6</div>
7</div>
8
9<div class="swiper-container list-thum">
10<div class="swiper-wrapper grid">
11<div class="swiper-slide"><img src="1thum.jpg"></div>
12<div class="swiper-slide"><img src="2thum.jpg"></div>
13<div class="swiper-slide"><img src="3thum.jpg"></div>
14</div>
15</div>
16
17<div class="swiper-container list">
18<div class="swiper-wrapper">
19<div class="swiper-slide"><img src="11.jpg"></div>
20<div class="swiper-slide"><img src="22.jpg"></div>
21<div class="swiper-slide"><img src="33.jpg"></div>
22</div>
23</div>
24
25<div class="swiper-container list-thum">
26<div class="swiper-wrapper grid">
27<div class="swiper-slide"><img src="11thum.jpg"></div>
28<div class="swiper-slide"><img src="22thum.jpg"></div>
29<div class="swiper-slide"><img src="33thum.jpg"></div>
30</div>
31</div>

javascript
1var listSlide = new Swiper('.list', {
2effect: 'fade',
3loop: true,
4});
5
6var listThum = new Swiper('.list-thum', {
7});
8
9//サムネイルのクリックイベント
10$(document).on('click', '.list-thum .swiper-slide', (e) => {
11var index = $('.list-thum .swiper-slide').index(e.currentTarget);
12listSlide.slideToLoop(index);
13});
14//サムネイルのアクティブ移動
15listSlide.on('slideChange', () => {
16$('.list-thum .swiper-slide').removeClass('is-active');
17$('.list-thum .swiper-slide').eq(listSlide.realIndex).addClass('is-active');
18});
19//style属性を削除
20listThum.destroy();
21listThum = null;
22$('.list-thum .swiper-wrapper').removeAttr('style');
23$('.list-thum .swiper-slide').removeAttr('style');
24$('.list-thum .swiper-slide').eq(listSlide.realIndex).addClass('is-active');