javascript – 在Bootstrap药片里面的JQuery LightSlider

2023年5月2日 183次阅读

我正在使用jQuery lightSlider作为图像滑块.我想在bootstrap药片里面有滑块(每个药丸一个滑块).不过,我发现了以下情况：在第一个药丸中滑块是可以的.在第二个药丸中,不显示滑块内容(调整窗口大小会调出滑块内容！).我看不出如何解决这个问题.任何帮助将是真诚的感谢.

我的(简体)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/

谢谢您的帮助！

最佳答案 问题：您正在尝试对已隐藏的内容(#s2)调用lightSlider,因此插件无法计算该元素的高度,宽度(等).

将活动类添加到第二个.panel窗格.

Jsfiddle

点赞