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我理解你的意思。你有一个宽度有限的包装。你有绝对列表，宽度为2930像素（自动计算），该列表的列表项目宽度为100％。所以，这些项目当然需要列表的宽度（2930px）。点击即可向左/右移动它们。如果您希望它们与包装器的宽度相同，则应在代码中设置它。例如，您可以添加

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

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