我使用 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>
Run Code Online (Sandbox Code Playgroud)
JavaScript:
function initSlider(sliderId) {
$('#'+sliderId).lightSlider({
item:2,
loop:false,
slideMove:1
});
}
initSlider('slider-1'); …Run Code Online (Sandbox Code Playgroud)