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

Question

I have an automatic carousel on my website. When I resize the browser, the functionality of the carousel still works but the images become distorted (the carousel shows some of both pictures)

Here is the codepen: https://codepen.io/Harrison17/pen/VweamoL

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

I think I need to add an event listener for a resizing of the window but I'm not sure how to implement it into my code.

Answer 1

The code is as follows:

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

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

Hope this helps!

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;
}

You would probably want to use the width attribute and "slide" accordingly. If you can't get it working, I advise using one of my JavaScript carousel libraries such as slick