javascript - 为轮播 slider 创建动态宽度元素

Question

我目前正在让我的轮播响应。到目前为止，我已经设法让它响应，只有当用户调整大小和刷新浏览器时，它才会以编程方式调整大小。如何在不刷新浏览器的情况下调整它的大小。

更新:

我尝试使用以下答案。目前，即使我调整浏览器大小，它也保持固定值。在我的 css 中没有放置固定值

$(document).ready(function() {
  var sliderWidth = 0;
  var sliderContainer = $('.slider-container');
  var slider = $('.slider-container .slider');
  var sliderItems = $('.slider li');
  var sliderContainerWidth = sliderContainer.width();

  sliderItems.width(sliderContainerWidth / 2);

  $('.slider-container ul.slider').children().each(function() {
    sliderWidth += $(this).outerWidth();
    slider.width(sliderWidth + 1000);
  });

  $('.btns .prev').on('click', function() {
    prevSlide();
  })

  function prevSlide() {
    var sliderItemsWidth = sliderItems.width();
    var leftIndent = parseInt($(sliderItems).css('left')) - sliderItemsWidth;

    function animate() {
      $('.slider-container .slider:not(:animated)').animate({
        'left': leftIndent
      }, 100)
    }
    animate();
  }
})

.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  background-color: #ccc;
}

.wrapper .slider-container {
  float: left;
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: beige;
}

.wrapper .slider-container .slider {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.wrapper .slider-container .slider li {
  height: 300px;
  background-color: #ccc;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="slider-container">
    <ul class="slider">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <ul class="btns">
      <li class="prev">prev</li>
      <li class="next">next</li>
    </ul>
  </div>
</div>

Answer 1

根据我的意见，您可以将调整大小的位放入一个函数中并在窗口调整大小时调用它:

$(document).ready(function() {
  var sliderContainer = $('.slider-container');
  var slider = $('.slider-container .slider');
  var sliderItems = $('.slider li');
  
  function resize() {
      var sliderWidth = 0;
      var sliderContainerWidth = sliderContainer.width();
    
      sliderItems.width(sliderContainerWidth / 2);

      $('.slider-container ul.slider').children().each(function() {
        sliderWidth += $(this).outerWidth();
        slider.width(sliderWidth + 1000);
      });
  }
  

  $('.btns .prev').on('click', function() {
    prevSlide();
  })

  function prevSlide() {
    var sliderItemsWidth = sliderItems.width();
    var leftIndent = parseInt($(sliderItems).css('left')) - sliderItemsWidth;

    function animate() {
      $('.slider-container .slider:not(:animated)').animate({
        'left': leftIndent
      }, 100)
    }
    animate();
  }
  
  resize();  // call onload
  
  $(window).on('resize', function () {
      resize();  // call when browser is resized
  });
})