3つのSwiperをタブで切り替えているのですが、2順目から動かなくなってしまう

Question

Swiperで作ったスライダーを3つ、TABSLETで切り替えうようにしています。
http://idangero.us/swiper/
http://vdw.github.io/Tabslet/
※Tabslet.jsはhtmlの構成を変えたので、少し手を加えています。

タブの1順目は問題なく動くのですが
2順目に入ると、そのままではスライダーが動かず
マウスで少しドラッグすると動くようになります。

原因とかが全くわからず。。ご教授いただけないでしょうか。
どうかよろしくお願いいたします。

<div class="new_tab">
<div class="ttlbox">
  <h2>NEW</h2>
  <ul class="tab">
	<li><a href="#new_tab_1">タブ１</a></li>
	<li><a href="#new_tab_2">タブ２</a></li>
	<li><a href="#new_tab_3">タブ３</a></li>
  </ul>
</div>

<div class="tab_wrap">
  <div id="new_tab_1" class="tab_area">
  <div class="swiper-container newslider">
	<ul class="swiper-wrapper">
	<li class="swiper-slide">スライド１の内容</li>
	<li class="swiper-slide">スライド3の内容</li>
	<li class="swiper-slide">スライド4の内容</li>
　　　　　　・・・
	</ul>
  </div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>

<div class="tab_wrap">
  <div id="new_tab_1" class="tab_area">
  <div class="swiper-container newslider">
	<ul class="swiper-wrapper">
	<li class="swiper-slide">スライド１の内容</li>
	<li class="swiper-slide">スライド3の内容</li>
	<li class="swiper-slide">スライド4の内容</li>
　　　　　　・・・
	</ul>
  </div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>

<div class="tab_wrap">
  <div id="new_tab_1" class="tab_area">
  <div class="swiper-container newslider">
	<ul class="swiper-wrapper">
	<li class="swiper-slide">スライド１の内容</li>
	<li class="swiper-slide">スライド3の内容</li>
	<li class="swiper-slide">スライド4の内容</li>
　　　　　　・・・
	</ul>
  </div>
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>
</div>

var swiper;
$(document).ready(function() {
	swiper = new Swiper('.newslider', {
		observer: true,
		observeParents: true,
		slidesPerView: 'auto',
		loop: true,
		speed: 1000,
		autoplay: {
		delay: 2000,
		disableOnInteraction: false,
	},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});

	$('.new_tab').tabslet({
		animation: true,
		autorotate: true,
		delay: 5000
	});	

});

Answer 1

私も同じような症状で困っていました。
https://teratail.com/questions/51618
こちらの回答を参考にCSSを変更すると動くようになりました。

タブ切り替えにdisplay:none;が使用されていると、2つ目以降のタブ内にあるスライダーは$(function(){});のタイミングでは存在しませんので、実行されません。

という部分がポイントではないかと思います。

tabsletでタブの１番目だけ表示させるために２番目と３番目を消すという処理を、display:none;ではないものに出来れば動作するかもしれません。