如何使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>

這是制作滑塊的完整代碼。

這是線性類型的滑塊，可用於顯示產品或其所有類別。

如何使此Slider自適應？

Answer 1

更新css。

從幻燈片類中取出絕對高度值並添加width: 100%想要取出高度的原因是，這樣就沒有固定的高度，而在調整大小或在較小的設備上時，這會成為問題。

在滑塊ID中

#slider {

               width: 100%;//add this

           }

這將使您所有的幻燈片垂直對齊並響應。

這是您應該嘗試執行的操作。

   #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