bxslider doesn't load in bootstrap 3 tabs

Question

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

bxslider doesn't load in bootstrap 3 tabs

Sign up