Is there a way to center the selected image instead of it appearing on the left-hand side?
Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg
I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: https://codesandbox.io/s/5vn3lvz2n4
Dependencies: "react-images": "^1.2.0-beta.7", "react-photo-gallery": "^8.0.0"
I have been struggling to target the CSS class, but I believe it is: class="react-images__view react-images__view--isModal css-1qrom1v css-1ycyyax" according to Safari's dev tools.
Below is my PhotoLibrary file:
import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { photos } from "../data/photoData";
export default function PhotoLibrary() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);
const openLightbox = useCallback((event, { photo, index }) => {
setCurrentImage(index);
setViewerIsOpen(true);
}, []);
const closeLightbox = () => {
setCurrentImage(0);
setViewerIsOpen(false);
};
return (
<div>
<Gallery photos={photos} onClick={openLightbox} />
<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={photos.map((x) => ({
...x,
srcset: x.srcSet,
caption: x.title,
}))}
/>
</Modal>
) : null}
</ModalGateway>
</div>
);
}
Has anyone encountered a similar issue while working with the carousel in Next.js? Any suggestions or alternative solutions are welcome.