CenterMode with Infinite and Variable Width not centering properly

The slider is sitting in a container that is 100% the width of the viewport and width is determined by each image element child which is ultimately governed by the height of the parent container. These are native images in an img tag so they proportionally scale their aspect ratio according to the height.

The centering is off from the center by a small amount that is variable on each item. I'm not sure what is wrong with the centering calculation, but it is wrong and producing off-center results. See several screenshots below.


``

```javascript
const slide_settings = {
infinite: true,
slidesToScroll: 1,
slidesToShow: 1,
arrows: false,
dots: false,
speed: 400,
swipe: true,
swipeToSlide: true,
easing: "ease-out",
className: "projectslider",
variableWidth: true,
centerMode: true,
centerPadding: "0px",
afterChange: (index) => {
setCurrentMedia(index);
},
};
```

```css
.projectslider {
height: 100%;
padding: 0;

.slick-list {
height: 100%;

.slick-track {
height: 100%;

.slick-slide {
height: 100%;

> div {
height: 100%;
width: auto;

figure {
outline: none;
height: 100%;
width: auto !important;
margin: 0;
padding: 0 25px;
position: relative;
z-index: 1;

img,
video {
cursor: pointer;
height: 100%;
outline: none;
width: auto;
}
}
}
}
}
}
}
```

```javascript

{mediaData.map((media, index) =>
media.type === "videotype" ? (
goToSlide(index)} key={index}>




) : (
goToSlide(index)}>


)
)}

You can see a live version [here](https://studio-jarvis-git-v2-studio-jarvis.vercel.app/).