Bootstrap 药片中的 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

问题：您试图调用已经隐藏的lightSlidercontent( #s2)，因此插件无法计算该元素的高度、宽度（等）。

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

杰斯小提琴