title: How to make Slider Responsive in Html and Css
body: <pre><code>&lt;!doctype html&gt;
     &lt;html&gt;
     &lt;head&gt;
         &lt;meta charset="utf-8"&gt;
         &lt;style&gt;
             #slider {
                 height: 350px;
                 width: 70%;
                 margin: auto;
                 overflow: hidden;
                 background: #CCC;
             }
             .slide {
                 height: 350px;
                 float: left;
                 text-align: center;
                 border: 1PX SOLID #000;
                 line-height: 8em;
                 font-size: 40px;
             }
       &lt;/style&gt;
       &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/&gt;
       &lt;script&gt;
            $(document).ready(function () {
                // you can set this, as long as it's not greater than the cv.slides length
                var show = 3;
                var w = $('#slider').width() / show;
                var l = $('.slide').length;
                $('.slide').width(w);
                $('#slide-container').width(w * l)
  
                function slider() {
                    $('.slide:first-child').animate({
                        marginLeft: -w
                    }, 'slow', function () {
                         $(this).appendTo($(this).parent()).css({marginLeft: 0});
                    });
                }
                var timer = setInterval(slider, 2000);
  
                $('#slider').hover(function() {
                    clearInterval(timer);
                },function() {
                    timer = setInterval(slider, 2000);
                });
            });
    &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body background="../background2.png"&gt;
    &lt;h1 style="text-align:center; margin-top:60px; color:#fff; fb f            font-size:60px"&gt;Slider&lt;/h1&gt;
    &lt;div id="slider"&gt;
       &lt;div id="slide-container"&gt;
          &lt;div class="slide"&gt;Slide 1&lt;/div&gt;
          &lt;div class="slide"&gt;Slide 2&lt;/div&gt;
          &lt;div class="slide"&gt;Slide 3&lt;/div&gt;
          &lt;div class="slide"&gt;Slide 4&lt;/div&gt;
          &lt;div class="slide"&gt;Slide 5&lt;/div&gt;
          &lt;div class="slide"&gt;Slide 6&lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>This is the full code for making the slider.</p>
  
  <p>This is a linear type of slider which can be use for to display the products or all about its categories.</p>
  
  <p>How to make this Slider Responsive?</p>