Creating a centered carousel with react-alice-carousel - css

Question

I have struggled the whole day to create a centered carousel with react-alice-carousel library and the results are those. Link to the library here
Basically I achieve the results showcased on the gif which were fulfilling enough for me but the fact that the focused image (the one on the left) is not centered is bugging me a lot. I have tried overwriting certain CSS properties but the results were not great (carousel item disappears if I try absolute positioning). My question is - is there a certain algorithm I can add to my logic so that the centered image would be in the middle of the carousel always? (2nd item in array of 3, 3rd item in array of 5, 4th item in an array of 7 and etc.) and if such algorithm does not exist how can I achieve to make my carousel centered-oriented.
Sandbox: https://codesandbox.io/s/happy-lichterman-knwbce?file=/src/App.js
Targeted tile (plays the role of the product in my gif) is marketed in red color
Also mostly my carousel in the project:
// Carousel helper properties / functions
const responsive = {
2000: {
items: 11,
},
1200: {
items: 5,
},
800: {
items: 3,
},
0: {
items: 1,
},
};
const handleDragStart = (e: any) => e.preventDefault();
const items = products.map((product, index) => (
<img
key={product._id}
className={selectedIndex === index ? "focusedImage" : "shownImage"}
onDragStart={handleDragStart}
style={{ height: "150px", width: "150px" }}
src={product.image}
alt='Product that is being sold on this page'
/>
));
return (
<main>
<div className='details__wrapper'>
<AliceCarousel
activeIndex={selectedIndex}
mouseTracking
responsive={responsive}
items={items}
infinite
controlsStrategy={"default"}
autoPlayStrategy='all'
autoPlayInterval={1000}
disableDotsControls
disableButtonsControls
keyboardNavigation
onSlideChanged={(e: EventObject) => {
setSelectedIndex(e.item);
setSelectedProduct(products[e.item]);
}}
/>
As seen all of the images that are seen by the user already have classes "shown" or "focused" image
And my SASS:
.alice-carousel {
&__wrapper {
& .alice-carousel__stage {
&-item {
z-index: 0 !important;
& .shownImage {
opacity: 0.5;
margin: 0 auto;
grid-area: image;
display: block;
border: 2px solid;
border-radius: 50%;
height: 20rem !important;
width: 20rem !important;
}
&.__target {
z-index: 1 !important;
.focusedImage {
opacity: 1 !important;
}
}
}
}
}
}
Mostly classes already listed in the documentation on GitHub.