如何使图像滑块响应？

我已经使用了图像滑块插件。它的工作正常，但它没有变得响应，意味着当我减少窗口的大小，它不会去滑块不会改变其大小。以下是截图：如何使图像滑块响应？

enter image description here

以下是代码：

<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;}

所以，我怎样才能使它响应。我非常喜欢Google，我不知道如何去做。请任何一个可以帮我解决这个问题..提前谢谢..

来源

2013-05-29 Anand Jaju

'width =“82％”'？真的吗？如千年前一样，这已被弃用，将其转移到CSS并使其成为100％，这很可能是响应式响应的开始。 – Kyle

使用任何响应滑块插件，Jquery Cycle2是一个不错的选择。 http://jquery.malsup.com/cycle2/ –

@KyleSevenoaks：该背景图像不会减少..内部滑动图像正在减少，因为每个窗口屏幕.. –

去除82％，并创下

img{ 
    max-width:100%; 
    height:auto; 

}

来源

2013-05-29 11:44:11

我没有使用img标签作为背景图片..我jst通过CSS插入.. –

使滑块宽度％，并使其100％，还安装循环2插入。它会工作。

来源

2014-07-18 07:34:26 sajid

#slideshow{ 
max-width:30em; 
height:30em; 
}

试试这个改变你测量到em代替px为我工作。

来源

2015-02-26 05:29:03

如何使图像滑块响应？

回答

相关问题