title: How to make simple JS slider fully responsive?
body: <p>Here is a simple Js slider, and need to make it responsive for mobiles. But when i apply max-width to #slider and #image it hides whole div element. For example default width should be 500pxl and 300pxl height. For wide screen. It should automatically resize depend on mobile and tablet screen width. Is it possible?
  html:</p>
  
  <pre><code>&lt;body onLoad="photoA()"&gt;
  &lt;div id="slider"&gt;
  &lt;img src="Images/img1.jpg" id="image" &gt;
   &lt;img onClick="photo(-1)" class="left" src="Images/arrow_left.png"&gt;  
   &lt;img onClick="photo(1)" class="right" src="Images/arrow_right.png"&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>*{
      margin:0px;
      }
  #slider {
      height:350px;
      max-width:500px;
      margin: 5px auto;
      position:relative;
      border-radius:4px;
      overflow:hidden;
      }
  #image {
      height:350px;
      width:500px;
      position:absolute;
      }
  
  .left {
      height:50px;
      width:50px;
      position:absolute;
      top:40%;
      left:10px;
      opacity:1;
      transition: all .2s ease-in-out 0s;
      }
  .right {
      height:50px;
      width:50px;
      position:absolute;
      top:40%;
      right:10px;
      opacity:1;
      transition: all .5s ease-in-out 0s;
      }
  .right:hover ,  .left:hover {
      opacity:0.6; cursor: pointer;
      }
  </code></pre>