宽度100％的简单滑块

Question

我正在使用一个简单的滑块插件来创建这样的滚动条：

然后更改为下一张幻灯片：

这与“插件”完全相同，但问题是在我的情况下，滑块的width必须是屏幕的100%（插件的width固定为{ {1}}）：

http://codepen.io/zuraizm/pen/vGDHl

我尝试将500px添加到CSS width: 100%，slider和ul但没有运气：

li

有关如何使其在 #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; width: 100% !important; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; width: 100% !important; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; width: 100%; } 上工作的任何想法，例如我的示例图片吗？

Answer 1

slider-elements也需要获得100％的宽度：

#slider {
    width: 100%;
}

还有：

#slider ul li {
    width: 100%;
}

请勿通过css中的宽限值两次将宽度值分配给相同的元素。我已经在你的小提琴上尝试了这个并且它有效。

修改

并对你的JS进行一些调整，在你的“小提琴”中用以下代码替换第14-16行：

$('#slider').css({ height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, height: slideHeight });

$('#slider ul li').css({ width: slideWidth }); 

http://codepen.io/anon/pen/viBHe

Answer 2

尝试删除position: relative;的{​​{1}}并给他#slider，因为从父元素获取全宽。具有绝对，相对，固定位置的元素没有父元素。或者你可以用JQuery做到这一点。

Answer 3

因为它是滑动效果，所以您无法将width: 100%添加到li元素中。 javascript将UL宽度调整为所有组合滑块项的大小。 你需要做的就是

1. 您需要计算幻灯片的宽度（可能是浏览器窗口或容器DIV的大小），并使用javascript调整图像大小以及将slideWidth变量更改为新宽度

2. 如果你有一个响应式布局并且需要滑块响应，你将不得不在JQuery中创建一个侦听resize事件的函数。调整滑块大小时，您需要将变量slideWidth更改为滑块的新大小。