JQuery LightSlider inside Bootstrap tablets

Question

I am using jQuery lightSlider as an image slider. I want to have sliders inside bootstrap tablets (one slider per tablet). However, I found the following situation: in the first tablet, the slider is in order. In the second tablet, the contents of the slider are not displayed (resizing the window will cause the contents of the slider to appear!). I do not see how to solve this problem. Any help would be truly appreciated.

My (simplified) html:

<div>
    <ul class="nav nav-pills">
        <li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>

        </li>
        <li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>

        </li>
    </ul>
</div>
<div class="tab-content">
    <div class="col-md-12 tab-pane fade in active" id="s1">
        <ul id="slider-1">
            <li>
                <p>one</p>
            </li>
            <li>
                <p>two</p>
            </li>
            <li>
                <p>tree</p>
            </li>
        </ul>
    </div>
    <div class="col-md-12 tab-pane fade active" id="s2">
        <ul id="slider-2">
            <li>
                <p>uno</p>
            </li>
            <li>
                <p>dos</p>
            </li>
            <li>
                <p>tres</p>
            </li>
        </ul>
    </div>
</div>

javascript:

function initSlider(sliderId) {
  $('#'+sliderId).lightSlider({
    item:2,
    loop:false,
    slideMove:1
  });
}

initSlider('slider-1');     
initSlider('slider-2');

And Jsfiddle reproduces the problem: https://jsfiddle.net/sedtjchs/4/

Thank you for your help!

Answer 1

. lightSlider (#s2), , , ( ..) .

active .panel-pane.

Jsfiddle

Answer 2

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    $('#slider-2').lightSlider({
        item:4,
        loop:false,
        slideMove:2,
        pager: false,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [

            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                }
            }
        ]
    }).refresh();
});

Answer 3

I have the same problem, but Alex's solution doesn’t work for me, since my tab cover does not have a fixed height, so a space under the first tab will be displayed on first load.

Thành Nguyễn's solution works for me. Basically, it updates the slider every time you click on the navigation tab, so LightSlider will be able to calculate the height of the active container.

Here's the full script:

$(document).ready(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $('#slider-2').lightSlider({
            item:4,
            loop:false,
            slideMove:2,
            pager: false,
            easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
            speed:600,
            responsive : [

                {
                    breakpoint:480,
                    settings: {
                        item:2,
                        slideMove:1
                    }
                }
            ]
        }).refresh();
    });
});