Question

您好我使用的jQuery lightslider正在运行，非常棒。我在响应模式下使用它但我无法自动调整边距，以便幻灯片始终填充页面的整个宽度。它始终保持一致。

当您使用320px屏幕的一张幻灯片并且单张幻灯片卡在左侧时，这一点尤为明显。这是我的设置：

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

Just a quick fix I came up with. Not sure if it applies to all situations, but the idea is you can pass any class you want and adjust with css.

In your javascript

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

In your css

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

水平居中JQuery Lightslider幻灯片

1 个答案: