如何为我的代码实现 window resize 事件侦听器？

Question

我的网站上有一个自动轮播。 当我调整浏览器的大小时，轮播的功能仍然有效，但图像变得扭曲（轮播显示了两张图片中的一些）

这是代码笔： https://codepen.io/Harrison17/pen/VweamoL

const slideWidth = slides[index].clientWidth;
slide.style.transform = `translateX(${-slideWidth * index}px)`;

我想我需要添加一个事件侦听器来调整 window 的大小，但我不确定如何在我的代码中实现它。

Answer 1

代码如下：

function onResize() {
  var windowWidth = window.innerWidth;

  // change the width of images or the carousel based on window width
}
window.onresize = onResize;

希望这可以帮助！

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

window.onresize = function() {
    var height = window.innerHeight;
    var width = window.innerWidth;
}

您可能希望使用宽度属性并相应地“滑动”。 如果你不能让它工作，我建议使用我的 JavaScript 轮播库之一，比如slick