如何通過瀏覽器大小來調整Javascript幻燈片大小

Question

所以我已經在Javascript/jQuery中完成了這個小小的自動幻燈片演示。它工作得很好，但我無法弄清楚如何按照屏幕尺寸縮放它，使其變得流暢。它目前已針對1920x1080進行了優化。

我試着將這個值（document.body.style.width）分配給寬度變量沒有運氣，嘗試使用百分比而不是像素，並嘗試使用非常黑客修復與媒體查詢所有徒勞無功。

如果任何人有我怎麼可能做到這一點要告訴一個想法（再次，我需要它的瀏覽器窗口縮放），總之，這裏的代碼：

<div class="slider"> 
    <ul class="slides"> 
     <li class="slide"><img src="index/showcase.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic4.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic3.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic5.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic6.png" alt="#"/></li> 
    </ul> 
    </div> 

    .slider { 
    width: 1920px; 
    height: 780px; 
    overflow: hidden; 
    } 

    .slider .slides { 
    display: block; 
    width: 9600px; 
    height: 780px; 
    margin: 0; 
    padding: 0; 
    } 

.slider .slide { 
float: left; 
list-style-type: none; 
width: 1920px; 
height: 780px; 
} 




    <script type="text/javascript"> 
     var myInterval = setInterval(function() { 
     console.log(new Date()); 
     }, 1000); 
     </script> 

    <script type="text/javascript"> 
    $(function() { 

    //configuration 
    var width = 1920; 
    var animationSpeed = 1000; 
    var pause = 4000; 
    var currentSlide = 1; 

    //cache DOM 
    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('.slides'); 
    var $slides = $slideContainer.find('.slide'); 

    var interval; 

    function startSlider() { 
     interval = setInterval(function() { 
     $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, 
    function(){ 
      currentSlide++; 
      if (currentSlide === $slides.length) { 
      currentSlide = 1; 
      $slideContainer.css('margin-left', 0); 
     } 
     }); 
    }, pause); 
    }   
    // function stopSlider() { 
    // clearInterval(interval); 
    //} 

    //$slider.on('mouseenter', startSlider).on('mouseleave', startSlider); 

    startSlider(); 
}); 
</script> 

Answer 1

大衆和VH可能是什麼你在之後。寬度：20％或寬度：550像素，而不是寬度：100vw是視口寬度的100％（vh是視口高度）。然後它應該隨着視口大小調整大小。