jquery - JQuery Lightslider 幻灯片水平居中

Question

嗨，我正在使用 jQuery lightslider这是有效的，大部分都很棒。我在响应模式下使用它，但无法让它自动调整边距，以便幻灯片始终填充页面的整个宽度。它始终保持左对齐。

当您在 320 像素屏幕上查看一张幻灯片并且该幻灯片卡在左侧时，这一点尤其明显。这是我的设置:

var slider = $('#light-slider').lightSlider({
    loop:true,
    keyPress:true,
    pager:false,
    item:6,
    adaptiveHeight:true,
    useCSS:true,
    controls: false,
    responsive : [
        {
            breakpoint:1160,
            settings: {
                item:5
            }
        },
        {
            breakpoint:980,
            settings: {
                item:4
            }
        },
        {
            breakpoint:766,
            settings: {
                item:3
            }
        },
        {
            breakpoint:600,
            settings: {
                item:2
            }
        },
        {
            breakpoint:380,
            settings: {
                item:1
            }
        }
    ]
});

我在文档中看不到任何可以帮助我实现内容居中的信息，所以我不知道是否还有其他方法？

谢谢

Answer 1

这只是我想出的一个快速解决方案。不确定它是否适用于所有情况，但想法是您可以传递任何您想要的类并使用 css 进行调整。

在你的 JavaScript 中

$('#light-slider').lightSlider({
    ...
    addClass: 'center-thumbs',
    ...
});

在你的CSS中

.center-thumbs .lslide {
    margin: 0 auto;
}