Zinan Nadeem Zinan Nadeem - 3 years ago 243
CSS Question

bxslider doesn't load in bootstrap 3 tabs

I'm using

bxSlider
and
Bootstrap
tabs for a project. I used three sliders in three tabs. The active tab is showing
bxSlider
but when I click on other tabs it doesn't load slider anymore.

<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>


activation:

$(document).ready(function() {
$('.bxslider,.bxslider-two').bxSlider();
});


Sample project

Answer Source

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();
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download