如何為我的代碼實現 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