bxslider不会在bootstrap 3选项卡中加载

Question

我正在使用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();
});

示例项目

Answer 1

为了正确初始化,您的滑块应该是可见的.第一个选项卡上的滑块起作用,因为它在bxSlider()被调用时是可见的.一个想法是等待启动,直到单击选项卡.我用一个例子修改了你的jsfiddle.

新的jQuery:

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

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