How do I implement the window resize event listener to my code?

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.

Jasper Huang · Accepted Answer · 2020-06-11 18:26:13Z

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!

answered Jun 11, 2020 at 18:26

Jasper Huang

5592 gold badges7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mingle Li · Accepted Answer · 2020-06-11 18:25:50Z

0

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

answered Jun 11, 2020 at 18:25

Mingle Li

1,4001 gold badge15 silver badges40 bronze badges

Collectives™ on Stack Overflow

How do I implement the window resize event listener to my code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related