Using multiple mastersliders with Bootstrap tabs

I’m trying to add multiple mastersliders to (Bootstrap) tabs. Only the first tab shows the slider correctly, on every other tab the slider is not displaying correct. It’s almost as if the first slider is not being removed before the active tab is loaded (sorry if that sounds confusing, it’s rather hard to explain what’s going on).

Here is the code I’m using:

<h3>Shot by Kathryn</h3>
<ul class="nav nav-t nav-stacked col-md-2">
	<li class="active"><a href="#maternity" data-toggle="tab">Maternity</a></li>
	<li><a href="#children" data-toggle="tab">Children</a></li>
	<li><a href="#family" data-toggle="tab">Family</a></li>
	<li><a href="#lifestyle" data-toggle="tab">Lifestyle</a></li>
</ul>
<div class="tab-content col-md-10">
<div class="tab-pane active" id="maternity">
[masterslider id="1"]			

</div>
<div id="children" class="tab-pane">
[masterslider id="2"]

</div>
<!--/children-->
<div id="family" class="tab-pane">
[masterslider id="3"]

</div>
<!--/family-->
<div id="lifestyle" class="tab-pane">
[masterslider id="4"]

</div>
<!--/lifestyle-->

</div>
<!--Tab content-->

Anyone have experience with this issue?

https://wordpress.org/plugins/master-slider/