如何使HTML和CSS中的滑块响应

Question

<!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? 如何使此Slider自适应？

Answer 1

Update the css . 更新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. 从幻灯片类中取出绝对高度值并添加width: 100%想要取出高度的原因是，这样就没有固定的高度，而在调整大小或在较小的设备上时，这会成为问题。

In the slider ID 在滑块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;
   }

如何使HTML和CSS中的滑块响应

问题描述

1 个解决方案

解决方案1
1 2018-08-06 17:00:45

如何使HTML和CSS中的滑块响应

问题描述

1 个解决方案

解决方案1 1 2018-08-06 17:00:45

解决方案1
1 2018-08-06 17:00:45