[英]How to make a image slider responsive?
我使用了一个插件用于图像滑块。 它工作正常但它没有变得响应,意味着当我减小窗口的大小时,它不会去滑块不改变它的大小。 以下是截图:
以下是代码:
<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>
以下是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;}
那么我怎样才能使它具有响应性。 我非常喜欢谷歌,我不知道怎么做。 请任何人帮我解决这个问题..提前谢谢..
#slideshow{
max-width:30em;
height:30em;
}
尝试将此测量值更改为em
而不是px
为我工作。
删除82%并设置
img{
max-width:100%;
height:auto;
}
将滑块宽度设为%并使其为100%,同时安装cycle2插件。 它会工作的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.