title: How to make a image slider responsive?
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/EjIpo.png" alt="enter image description here"></p>
  
  <p>Following is code:</p>
  
  <pre><code>&lt;div id="main-content"&gt;
      &lt;br/&gt;
      &lt;div id="slideshow"&gt;
          &lt;ul class="slides"&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/a.png" width="82%" alt="Splash Screen" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/b.png" width="82%" alt="Select Route" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/c.png" width="82%" alt="New Schedule" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/d.png" width="82%" alt="Created Routes" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/e.png" width="82%" alt="CR"/&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;span class="arrow next"&gt;&lt;/span&gt;
          &lt;span class="arrow previous"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is css:</p>
  
  <pre><code>/*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;}
  </code></pre>
  
  <p>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..</p>