如何使圖像滑塊響應？

我已經使用了圖像滑塊插件。它的工作正常，但它沒有變得響應，意味着當我減少窗口的大小，它不會去滑塊不會改變其大小。以下是截圖：如何使圖像滑塊響應？

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

如何使圖像滑塊響應？

回答

相關問題