Javascript JQuery LightSlider内置引导程序

我使用jQuery lightSlider作为图像滑块。我想在引导药片里面有滑块（每个药片一个滑块）。然而，我发现了以下情况：在第一个药丸中，滑块是正常的。在第二个窗口中，不显示滑块内容（调整窗口大小会显示滑块内容！）。我不知道如何解决这个问题。我们将衷心感谢您的帮助

我的（简化）html：

JSFIDLE重现了这个问题：

---

谢谢你的帮助

问题：您试图调用内容（

#s2

）上的

lightSlider

，该内容已被隐藏，因此插件无法计算该元素的高度、宽度（等）

将

active

类添加到第二个

面板窗格

---

我也有同样的问题，但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();
    });
});

---

感谢Safian提供的解决方案。然而，它有一个“小”问题。初始化时，第二个药丸的内容出现（隐藏）在第一个药丸中：@DianaMoreno很抱歉延迟重播。您可以通过为

.tab content

指定固定宽度来解决问题（例如：

宽度：55px

）。检查。请在代码上方写一个描述，以便其他人能够理解您所做的。谢谢

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

initSlider('slider-1');     
initSlider('slider-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();
});

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