CSS 响应式图像滑块

Question

我在一个小滑块上工作，它用于固定值（在我的例子中是像素）。 我试着让它适合浏览器的大小。

我将包装器宽度设置为 90%，li 应该是每个包装器的 100%。因为滑块每张幻灯片只能显示一个项目。（而不是 2 个）。

#slider-wrap ul#slider li{
   float:left;
   position:relative;
   width:100%;//problomatic part
   height:400px;    
}

由于某种原因，当我将li 设置为 100% 时，它会获取窗口大小..并变成 100% 的窗口..而不是滑块包装器..我不知道为什么..

这是小提琴： https://jsfiddle.net/kL58jhou/2/

我希望解释清楚。

谢谢。

Answer 1

@Slashy 我明白你的意思。您有一个宽度有限的包装器。里面有绝对列表，宽度为 2930px（自动计算），并且该列表具有 100% 宽度的列表项。所以，这些项目当然会占用列表的宽度（2930px）。单击时，您只需将它们向左/向右移动。如果您希望它们与包装器的宽度相同，则应在代码中进行设置。例如你可以添加

   $(this).css("width",sliderWidth+"px");

在您的 $.each($('#slider-wrap ul li'), function() { 函数中 . 这不是一个完美的示例，因为您还必须在每次调整浏览器大小时运行它。