タブ切り替え要素の中にスライダーや他のJSを使いたい

前提・実現したいこと

タブ切り替え要素の中にスライダーを使用しています。
タブをクリックすると、スライダーが反映されなくなります。
画面をもう一度読み込むとスライド機能が再開します。

タブ切り替えとスライド機能を同時に動かしたいです。

JavaScriptに関する知識が少ないため解決方法が分からない状態です。

分かる方がいらっしゃいましたら、お力をお借りできれば幸いです。
よろしくお願いいたします。

スライドはswiper を使用しております。

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

タブ切り替えとスライド機能がうまく機能しない



### 該当のソースコード

```jQuery
$(function() {
			/*クリックイベント*/
				$('.tab_btn').on('click', function() {
		$('.tab_item').removeClass("is-active-item");
					$($(this).attr("href")).addClass("is-active-item");
					$('.tab_btn').removeClass('is-active-btn');
					$(this).addClass('is-active-btn');
			});
		});

javascript
1var innSwiper = new Swiper('.swiper-inn-container ', {
2		navigation: {
3			nextEl: '.swiper-button-next',
4			prevEl: '.swiper-button-prev'
5		},
6		loop: true,
7		speed: 900,
8		pagination: '.swiper-pagination',
9		autoplay: {
10			delay: 900,
11			disableOnInteraction: false
12		},
13		slidesPerView: 1,
14		spaceBetween: 1000,
15		initialSlide: 0,
16		breakpoints: {
17			1200: {
18				slidesPerView: 1,
19				spaceBetween: 40
20			},
21			1024: {
22				slidesPerView: 2,
23				spaceBetween: 30
24			},
25			600: {
26				slidesPerView: 1,
27				spaceBetween: 20
28			}
29		}
30
31	
32
33	});
34

html
1<div class="tab">
2<a class="tab_btn is-active-btn" href="#item1">エリア１</a>
3<a class="tab_btn" href="#item2">東山２</a>
4<a class="tab_btn" href="#item3">伏見３</a>
5	<a class="tab_btn" href="#item4">宇治４</a>
6						</div>
7
8<div class="tab_item is-active-item " id="item1">
9	<div class="swiper-custom-container">
10		<div class="swiper-inn-container swiper-container">
11			<div class="swiper-wrapper">
12       	<article class="swiper-slide insideitem"></article>
13
14