JQuery LightSlider在靴带药丸中

Question

我使用jQuery lightSlider作为图像滑块。我想有滑块内自举药丸(一个滑块每个药丸)。然而，我发现了以下情况:在第一个药丸滑块是可以的。在第二个药丸中，没有显示滑块内容(调整窗口大小会弹出滑块内容！)。我不知道如何解决这个问题。任何帮助都将受到真诚的感谢。

我的(简化) 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');

Jsfiddle复制了这个问题：https://jsfiddle.net/sedtjchs/4/

谢谢你的帮助!

Answer 1

Problem：您试图在内容(#s2)上调用lightSlider，该内容已经隐藏，因此插件无法计算该元素的高度、宽度(等等)。

将active类添加到第二个.panel-pane中。

小提琴手

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

我也有同样的问题，但是Alex的解决方案并不适用于我，因为我的标签包装没有固定的高度，所以在第一次加载时，它将在第一个选项卡下显示空白。

ễn的解决方案正在为我工作。基本上，每次单击选项卡导航时都会刷新滑块，因此LightSlider将能够计算活动容器的高度。

以下是完整的脚本：

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