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=".jpg" />
            </li>
            <li>
                <img src=".jpg" />
            </li>
            <li>
                <img src=".jpg" />
            </li>
            <li>
                <img src=".jpg" />
            </li>
        </ul>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
        <ul class="bxslider">
            <li>
                <img src=".jpg" />
            </li>
            <li>
                <img src=".jpg" />
            </li>
            <li>
                <img src=".jpg" />
            </li>
            <li>
                <img src=".jpg" />
            </li>
        </ul>
    </div>
</div>

activation:

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

Sample project

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

• javascript
• jquery
• css
• twitter-bootstrap

3 Answers 3

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();
});

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

$('a[href="#profile"]').one('shown.bs.tab', function(e) {
    $('.bxslider').bxSlider();
});

$( ".tabs-1").click(function() {
    $('#tabs-1 .bx-viewport').css("height","433");  //manuall hight 
    $('#latest_pros .dishes-item').css("width","245"); //manuall width
});

$( ".tabs-2").click(function() {
    $('#tabs-2 .bx-viewport').css("height","433");
    $('#latest_pros .dishes-item').css("width","245");
});

$( ".tabs-3").click(function() {
    $('#tabs-3 .bx-viewport').css("height","433");
    $('#latest_pros .dishes-item').css("width","245");
});