I'm using
bxSlider
Bootstrap
bxSlider
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation">
<a href="#profile" role="tab" data-toggle="tab">Profile</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<ul class="bxslider-two">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<ul class="bxslider">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
</div>
$(document).ready(function() {
$('.bxslider,.bxslider-two').bxSlider();
});
In order to initialize correctly your slider should be visible. The slider on the first tab works because it is visible when bxSlider()
is called. One idea is to wait to initiate until the tab is clicked. I modified your jsfiddle with an example.
New jQuery:
$(document).ready(function () {
$('.bxslider-two').bxSlider();
});
$('a[href="#profile"]').one('shown.bs.tab', function (e) {
$('.bxslider').bxSlider();
});