我正在学习如何从头开始创建图像滑块。功能方面都很好。但我想让滑块响应。如果您打开小提琴链接,并尝试调整窗口大小(显示第一张图像时),那么您可以看到我想要为所有幻灯片实现的目标。按下一个或上一个,调整窗口大小,然后你会看到什么问题,其他图像在滑块区域拉伸......那么,无论如何我可以让这个版本响应吗?还是我应该以不同的方式构建它?
ps 下一张图片是可见的,所以用户也可以点击下一张图片。它应该是这样的。
这是小提琴。http://jsfiddle.net/DkFnL/
部分代码 -
gallery-wrapper
{
border-left:220px solid rgb(243,239,223);
height: 75%;
}
#gallery-menu
{
width:220px;
margin-left: -220px;
text-align: center;
}
#slider
{
width: 100%;
height: 100%;
overflow: hidden;
}
#slider ul
{
width: 750%;
}
#slider ul li
{
width:10%;
float:left;
margin-right: 5px;
}
#slider ul li img
{
width: 100%;
}