How to make image slider responsive?

Question

I used the plugin for the image slider. It works fine, but it does not become responsive, which means that when I reduce the size of the window, it does not move on the slider, it does not change its size. Below is a screenshot:

Below is the 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 the 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 a lot of Google, I do not understand how to do it. Please help me solve this problem. Thanks in advance.

Answer 1

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

Try this to change your measurements in em instead of px , worked for me.

Answer 2

remove 82% and install

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

Answer 3

Make the slider width in% and make it 100%, also install the cycle2 plugin. he will work then.