jquery幻灯片需要在容器中居中，但宽度为100％

Question

这个问题已经消耗了我一整天而且我还没弄明白。我在javascript / JQuery上并不强大......

我需要实现的是，我有100％的体宽容器（最大宽度：1920px），然后在其中放置幻灯片，每次都会在容器宽度上显示8个幻灯片。中间的4张幻灯片中的8张幻灯片位于屏幕中央。如果我调整屏幕大小，4个幻灯片的中间将不会被切断，而是将4个幻灯片切掉。我怎样才能实现它？

我已经尝试分成三个区域，按照2-> 4-> 2的顺序，以实现中心始终位于中心。但是，当它滑动时它有点不稳定所以我正在寻找另一种解决方案

这是一张简单的图片......

Answer 1

我会评论，但我不能。 +1绘图技巧并尝试

margin:0px auto;

Answer 2

如果我理解你的问题，我建议为1000px容器设置这些css属性：

{
margin-left: auto;
margin-right: auto;
width: 1000px;
}

Answer 3

尝试设置＆＃34; min-width＆＃34;包含图片的div到1920px和＆＃34;溢出＆＃34;隐藏＆＃34;隐藏＆＃34;。 要使div容器居中，请使用绝对位置和以下边距/左边设置：

#picture-container {
    max-width: 1920px;
    min-width: 1920px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -960px;
}

请注意，要使用此规则，您需要知道元素的宽度。如果它是可变的，你应该使用javascript来设置元素的样式。

Answer 4

如果您可以使用CSS3功能calc，则可以像div一样计算边width: calc((100% - 1000px)/2);的宽度，以便中心div自动居中。看看this fiddle。

另一种方法是在onresize事件处理程序中使用javascript进行此计算。