Question

如何让浏览器的宽度用作VARIABLE？

我知道@media。我需要的是获得宽度并对其进行一些计算

我尝试使用jQuery，如果浏览器的宽度为 FIXED ，则效果很好，但是当我调整浏览窗口的大小时，它无法正常工作

这就是我想要做的事情：

html

<section id="slider">
    <div class="slides">
      <div class="slide">
        <h1>silde 1</h1>
        <p>Lorem ipsum dolor</p>
      </div>
     <div class="slide">
        <h1>silde 2</h1>
        <p>Lorem ipsum dolor</p>
      </div>
    </div> </section>

SCSS

$browser-width: (BROWSER WIDTH HERE) * .75 ;
#slider {
  overflow: hidden;
  position: relative;
  margin: auto;
  width: $browser-width;
  .slides {
    display: block;
    margin: 0;
    padding: 0;
    width: 6000px;
  }
  .slide {
    width: $browser-width;
    display: inline-block;
    float: left;
    text-align: center;
  }
}

我作为临时解决方案所做的是：使用jQuery：

$(document).ready(function(){   
  var width = $(window).width() * .75;   
  var $slider = $('#slider');   
  var $slideContainer = $slider.find('.slides');   
  var $slides = $slideContainer.find('.slide');   

  $slider.css("width", width);   
  $slides.css("width", width);

  /* function to make the slider here */ 
});

宽度= 75％不起作用，宽度= 75vw

Answer 1

没关系，我发现了这个问题 vw是答案，它没有用，因为我在滑动函数中犯了这个错误

'margin-left'：' - ='+ width

我需要做的是：

'margin-left'：' - ='+ width + “vw”

永远不要忘记代码中的单位..经验教训

这是我对那些感兴趣的人的滑动功能：

'use strict';


$(document).ready(function(){

  var width = 75;
  var animationSpeed = 1000;
  var pause = 1000;
  var currentSlide = 1;

  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 + "vw"}, animationSpeed, function(){
        currentSlide++;
        if (currentSlide === $slides.length){
          currentSlide = 1;
          $slideContainer.css('margin-left', 0);
        }

      });

    }, pause);
  }
function stopSlider(){
  clearInterval(interval);
}

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

startSlider();

});

将浏览器的宽度设置为scss中的变量

1 个答案: