如何通过浏览器大小来调整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是视口高度）。然后它应该随着视口大小调整大小。