javascript - bxslider 无法在 Bootstrap 3 选项卡中加载

Question

我正在为元素使用 bxSlider 和 Bootstrap 选项卡。我在三个选项卡中使用了三个 slider 。事件选项卡显示 bxSlider 但当我单击其他选项卡时，它不再加载 slider 。

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

Sample project

Answer 1

为了正确初始化，您的 slider 应该可见。第一个选项卡上的 slider 可以正常工作，因为在调用 bxSlider() 时它是可见的。一种想法是等到单击该选项卡后才启动。我修改了你的jsfiddle举个例子。

新的 jQuery:

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

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