Html 如何使图像滑块响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16807755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a image slider responsive?
提问by Anand Jaju
I have used a plugin for image slider. Its working fine but it is not becoming responsive, means when I decrease the size of window, it is not going to the slider doesn't changes its size. Following is screenshot:
我使用了图像滑块插件。它工作正常，但没有响应，这意味着当我减小窗口大小时，它不会转到滑块不会改变其大小。以下是截图：
Following is code:
以下是代码：
<div id="main-content">
<br/>
<div id="slideshow">
<ul class="slides">
<li class="sl"><img class="ss" src="image/a.png" width="82%" alt="Splash Screen" /></li>
<li class="sl"><img class="ss" src="image/b.png" width="82%" alt="Select Route" /></li>
<li class="sl"><img class="ss" src="image/c.png" width="82%" alt="New Schedule" /></li>
<li class="sl"><img class="ss" src="image/d.png" width="82%" alt="Created Routes" /></li>
<li class="sl"><img class="ss" src="image/e.png" width="82%" alt="CR"/></li>
</ul>
<span class="arrow next"></span>
<span class="arrow previous"></span>
</div>
</div>
Following is css:
以下是css：
/*main content*/
#main-content {
margin-left:auto;
margin-right:auto;
margin-top:35px;
max-width:900px;
border-top-left-radius:48px;
border-top-right-radius:48px;
border-bottom-left-radius:48px;
border-bottom-right-radius:48px;
padding-bottom:20px;
min-height:1100px;
background:url(res/back-img.png) repeat;
}
#slideshow{
background:url(res/iphone_small.png) no-repeat;
height:512px;
/*margin:auto 30px;*/
margin:40px 28px auto;
position:relative;
}
#slideshow ul{
height:55%;
list-style:none outside none;
overflow:hidden;
position:absolute;
top:12%;
width:20%;
}
#slideshow li{
position:absolute;
display:none;
z-index:10;
}
#slideshow li:first-child{
display:block;
z-index:1000;
}
#slideshow .slideActive{
z-index:1000;
}
#slideshow canvas{
display:none;
position:absolute;
z-index:100;
}
#slideshow .arrow{
height:12.5%;
width:5.1%;
position:absolute;
background:url('res/arrows.png') no-repeat;
top:50%;
margin-top:-55px;
cursor:pointer;
z-index:5000;
margin-left:28.5%;
margin-right:98%;
}
#slideshow .previous{ background-position:right top;right:0;}
#slideshow .previous:hover{ background-position:right bottom;}
#slideshow .next{ background-position:left top;left:0;}
#slideshow .next:hover{ background-position:left bottom;}
So how can I make it responsive. I did Google very much, I am not getting how to it. Please can any one help me to solve this issue.. Thanks in advance..
那么我怎样才能让它响应。我做了很多谷歌，我不知道怎么做。请任何人都可以帮我解决这个问题.. 提前致谢..
回答by Albin Shaji
#slideshow{
max-width:30em;
height:30em;
}
Try this change your measurements into eminstead of pxworked for me.
试试这个改变你的测量结果em而不是px为我工作。
回答by Hovhannes Sargsyan
remove 82% and set
删除 82% 并设置
img{
max-width:100%;
height:auto;
}
回答by sajid
Make the slider width in % and make it 100%, also install cycle2 plugin. it will work then.
将滑块宽度设为 % 并设为 100%，同时安装 cycle2 插件。它会工作。
