Control slide number
To open the gallery on a different slide than the first, specify the desired slide by using one of the two props: "slide" (integer) or "sourceIndex" (integer, slide number minus one).
function App() {
const [lightboxController, setLightboxController] = useState({
toggler: false,
slide: 1
});
function openLightboxOnSlide(number) {
setLightboxController({
toggler: !lightboxController.toggler,
slide: number
});
}
return (
<>
<button onClick={() => openLightboxOnSlide(1)}>
Open the lightbox on the first slide.
</button>
<button onClick={() => openLightboxOnSlide(2)}>
Open the lightbox on the second slide.
</button>
<FsLightbox
toggler={lightboxController.toggler}
sources={[
"/Images/1.jpg",
"/Images/2.jpg"
]}
slide={lightboxController.slide}
/>
</>
);
}In the above example there is presented a usage of the "slide" prop. The other prop—"sourceIndex"—is used analogously.