本文介绍了如何使图像滑块响应?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用了图片滑块的插件。它的工作正常,但它没有变得响应,意味着当我减少窗口的大小,它不会去滑块不会改变其大小。以下是截图:
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>
以下是css:
Following is 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..
推荐答案
#slideshow{
max-width:30em;
height:30em;
}
尝试将您的测量更改为 em
而不是 px
为我工作。
Try this change your measurements into em
instead of px
worked for me.
这篇关于如何使图像滑块响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!