javascript - bxslider doesn't load in bootstrap 3 tabs - Stack Overflow

admin管理员组

文章数量:1430923

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

Share Improve this question Follow edited Sep 30, 2017 at 6:24 buræquete 14.7k44 gold badges5353 silver badges9595 bronze badges asked Oct 31, 2014 at 22:19 Zinan NadeemZinan Nadeem 19933 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

本文标签： javascriptbxslider doesn39t load in bootstrap 3 tabsStack Overflow