CODEWITHSUNDEEP
htmlcssresponsive-design
Uvesh Imam
Uvesh Imam

Reputation: 11

How to make Slider Responsive in Html and Css

<!doctype html>
   <html>
   <head>
       <meta charset="utf-8">
       <style>
           #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;
           }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
     <script>
          $(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);
              });
          });
  </script>
  </head>

  <body background="../background2.png">
  <h1 style="text-align:center; margin-top:60px; color:#fff; fb f            font-size:60px">Slider</h1>
  <div id="slider">
     <div id="slide-container">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
        <div class="slide">Slide 4</div>
        <div class="slide">Slide 5</div>
        <div class="slide">Slide 6</div>
     </div>
  </div>
</body>
</html>

This is the full code for making the slider.

This is a linear type of slider which can be use for to display the products or all about its categories.

How to make this Slider Responsive?

Upvotes: 0

Views: 2084

Answers (1)

Oluwaseye
Oluwaseye

Reputation: 695

Update the css .

Take out the absolute height value from the slide class and add width: 100% The reason you want to take out the height is so you do not have a fixed height that becomes a problem when resizing or on smaller devices.

In the slider ID

#slider {

               width: 100%;//add this

           }

This will have all your slides lined up vertically and responsive.

Here's what you should have for what it seem you are trying to do.

   #slider {
       width: 100%;
       margin: auto;
       overflow: hidden;
       background: #CCC;
   }
   .slide {
     width: 100%:
       height: 350px;
       float: left;
       text-align: center;
       border: 1PX SOLID #000;
       line-height: 8em;
       font-size: 40px;
   }

Upvotes: 1

Related Questions