Question posted in 
I’m trying to create a lightbox,
I have a thumbnail carousel at the bottom of the images that you click on to change the displayed image. I want to make it so that when you click on any thumbnail, it scrolls to the center of the page making it seem like the selected element remains constantly at the center of the screen.
What I’ve done till now is I’ve added a dynamic left padding to the ThumbnailViewer container.
const ThumbnailViewer = (props) => {
const {
images = [],
currentImage = 0,
thumbnailWidth
} = useContext(LightboxContext);
const getThumbnailViewerPaddingLeft = () => {
if (thumbnailWidth) {
return `calc(95vw - ${(thumbnailWidth * (currentImage + 1))}px)`
}
}
const getThumbnailViewerPaddingRight = () => {
if (thumbnailWidth) {
return `calc(95vw - ${thumbnailWidth}px)`
}
}
return (
<div className={styles.thumbnailViewer} style={{ paddingLeft: getThumbnailViewerPaddingLeft() }}>
{images.map((el, i) => <ThumbnailIcon img={el.src} alt={el.alt} selected={i == currentImage} current={i} />)}
</div>
)
}
I’m unable to get it centred as you can see in this gif below and I’m not sure if this approach is right. I’m thinking to dynamically reduce left padding and then add right padding to it constantly so that when clicking on the right most element it gets to the center too.
Can someone help me if I’m on the right path or there is a better way to do this?
2
Answers
Relying on thumbnail width and adjusting padding might not be the most effective method. A more efficient approach involves utilizing the array index of the images. When a user clicks on a thumbnail, you can reposition that thumbnail to the middle of the array. This way, if you want the user to always stay centered upon clicking either left or right thumbnails, you can simply modify the array accordingly. This method offers a more dynamic and responsive user experience
Best way to achieve this would be to have a layout like this and update transform property on every click.
Doing so would be efficient because component will not have to re-render. You can use refs to update DOM. Checkout (refs and forwardRefs).